Defining html
1 / 87

Defining HTML - PowerPoint PPT Presentation

  • Uploaded on

Defining HTML. HTML : HTML is a subset of a larger markup language called SGML HTML stands for H yper T ext M arkup L anguage. This markup language is used to create web documents. A web document is viewed in a web browser.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Defining HTML' - zuriel

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Defining html

Defining HTML

HTML:HTML is a subset of a larger markup language called SGML

HTML stands for HyperTextMarkup Language. This markup language is used to create web documents. A web document is viewed in a web browser.

HTML (HyperText Markup Language) is the language of the World Wide Web. It is a descriptive language that utilizes a limited number of predefined markup tags to describe how a web browser should display a web page.

Defining html

  • Hyper is the opposite of linear. Old-fashioned computer programs were necessarily linear - that is, they had a specific order. But with a "hyper" language such as HTML, the user can go anywhere on the web page at any time.

  • Text is just what you're looking at now - English characters used to make up ordinary words.

  • Mark-up is what is done to the text to change its appearance. For instance, "marking up" your text with <b> before it and </b> after it will put that text in bold.

  • Language is just that. HTML is the language that computers read in order to understand web pages

Defining html

  • Browser:

    A browser is a software application that allows you to view HTML documents, whether Web pages or HTML files, on your own computer. Two popular browsers are Internet Explorer and Netscape Navigator.

  • Website

    A Web site stores information that has been organized into individual hypermedia documents, Web pages, and holds it on a server for distribution across the Internet.


  • A hypermedia document is a document with a format that can be displayed online, in a browser. In practice, hypermedia documents are often called HTML files, although they may contain many other types of files.

  • HTML standards are set and maintained by the World Wide Web Consortium

Defining html

  • WWW(World Wide Web)

    The Web, or World Wide Web, is the area of the Internet that allow you to display text and graphics and play videos, and movies. With appropriate equipment, we can even receive or broadcast live audio and video.

    A set of html pages accessible using HTTP

    Hyper Text Transfer Protocal- HTTP is the protocol to exchange or transfer hypertext.

    Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text.


    A hyperlink, or link, usually appears as colored, underlined text or a graphic on a Web page. A link is a jumping-off point for moving from one subject to another.

Defining html

  • HTML Web page authors require three basic tools:

    • Computer with graphics capabilities

    • Text editor

    • Browser software application

      Text editor:

      A text editor is a software application used to create and manipulate text, such as Notepad and WordPad.

Html editors
HTML editors

  • Text based editors

  • WYSIWYG editors

Text based or code based editors
Text-based (or code-based) editors

  • To start creating web pages, we do not need an expensive software package but you do need some knowledge of HTML. We can create web pages with a basic text editor like Windows Notepad.

  • In Windows, Notepad can be started from the Start Menu:

  • Select: Programs | Accessories | Notepad

  • Macromedia Homesiteis a popular text-based HTML editor.

Wysiwyg editors
WYSIWYG editors

  • Because WYSIWYG (pronounced wuzzywig or wizzywig) HTML editors do not require much HTML knowledge, they tend to be expensive. These editors allows you to directly work in the "design" or "preview" view instead of the code view.

  • There are several popular WYSIWYG editors available:

    Macromedia Dreamweaver

    Microsoft FrontPage

    Adobe GoLive

Defining html

Text-based (or code-based) editors

  • Better control. Because text-based editors require knowledge of HTML, the developer has more control over what is written to produce a web page. In some cases, a software package (like FrontPage) may write proprietary code that may not be interpreted by all the brwosers.

  • Faster editing. we can quickly change your code unlike WYSIWYG editors. WYSIWYG editors require, for example, a lot of computer-resources to start-up or load/open a page.

  • More flexibility. we can edit your code directly at the desired location. This cannot be always done with WYSIWYG editors.

Wysiwyg editors1
WYSIWYG editors

  • Support for other scripting languages. WYSIWYG editors provide advanced features to code in other programming/scripting languages such as JavaScript, XHTML, ASP/ASP.NET, PHP, and JSP.

  • Faster/simplified development. WYSIWYG editors allows you to develop pages quickly as the software writes the necessary code in response to the layout you design for your web page.

  • Better organization. Dreamweaver, for instance, allows you to define a site folder that contains all the files that make up the website. By defining a local site folder, you have many advantages including moving of files (without breaking links), searching of a particular term or tag in the entire site (without having the file open!), and FTP support to move only changed or new files to the server.

Creating an html document
Creating an HTML document

  • An HTML document has two elements:

    • Document Content

    • Tags

  • Document content is the information on a web page that the user will see. That information could be text or graphics, for example. As you start creating your own web pages, try finding out first what information you want to display and how you want to present it.

  • Tags are the HTML codes that control how the document content will appear. The tags, in other words, will determine whether the text will be bold, black or blue, or of font type Time New Roman or Airal

  • Naming conventions
    Naming conventions

    • HTML files names are very important as they are used to locate or open the files.

    • Save your web page files with the .htm or .html file extension.

    • Some web servers are case-sensitive.

    • Filenames should consists only of letters and numbers. Avoid using spaces, punctuation, or special characters.

    Basic structure of an html document
    Basic structure of an HTML document

    • An HTML document has two main parts:

    • head. The head element contains title and meta data of a web document.

    • body. The body element contains the information that we want to display on a web page.

    Understanding elements
    Understanding elements

    • To markup your web pages, we will need to learn the syntax (rules of a computing language) of HTML. the syntax only controls the presentation or structure of a web page.

    • The most fundamental piece of building block of HTML is the elements.

    • In HTML, an element refers to two different things:

    • element of structure of a document (for example, paragraph, web page title, etc.).

    • element in the sense of a tag (for example, <p>, <title>)

    Defining html

    • Tag

    • Start Tag

    • An End Tag

    • Empty Tags(no Content)

    • One-sided Tags.

    • Two-sided Tag.

    Defining html

    • Every element has a name such as head, title, p, i, and b.

    • A tag is the element name surrounded by the angled brackets. This refers to a start tag such as <p>, <title>, and <i>.

    • A start tag starts a particular HTML instruction.

    • An end tag is the same as a start tag except the end tag has a forward slash between the < and the element name. An end tag stops a particular HTML instruction.

    • Most elements have content, which is placed between the start and the end tags. Example, this is <b>bold</b>.

    • Some elements have no content. Such elements/tags are known as empty tags.

    • Some elements have no end tags. These are referred to as one-sided tags.

    • A tag that has an opening and closing tag is referred to as two-sidedtag.

    Understanding attributes
    Understanding attributes

    • In HTML, elements (or tags) have attributes or properties. As an HTML writer, attributes allow you to add extra instruction to your tags.

    • An attribute has two parts:

      attribute name and attribute value.


    • Ex: align="right”


    • In HTML, a comment begins with <!-- and ends with -->.

    • Example of a single line comment:

      <!--This is a small comment-->

    • Example of a multi-line comment:

      <!--This comment is long. It is displayed on more than one line. Adding multi-line comments in HTML is easy as adding a single line comment. Whether the comment is single line or multi-line, it starts with <-- and ends with -->-->.

    Spacing and breaks
    Spacing and breaks

    • breaks between tags

    • spacing between tags

    • Spacing inside the brackets

    • Avoiding unnecessary space in HTML code

    Avoiding unnecessary space in html code
    Avoiding unnecessary space in HTML code

    • There are two areas where the use of space should be avoided:

    • space between the tag name and brackets

    • space between the tag name and the text it affects

    Creating a paragraph
    Creating a paragraph

    • In HTML, creating a paragraph is simple as entering text. To create a paragraph, move the cursor to the location where you want the paragraph in the HTML editor you are using. Next, type the <p> tag to begin the paragraph.

    • close the <p> tag with </p>. Closing the tag instructs the browser that the paragraph has ended.

    • Attributes:

    • Align=left, right, center,justify




    <title>Paragraph example</title>



    <p align=“left”>ONE</p>

    <p align=“center”>TWO</p>

    <p align=“right”>THREE</p>

    <p align="justify">This paragraph uses the justify alignment. The paragraph is justified: the text continues to both margins.</p>




    • <html><title>How To Create Paragraph</title><body><p>To learn HTML and other web programming languages, come to regularly. The web site is updated daily with new content. The web site is succeeding because visitors like you keep coming back and find the site simple to use, easy to understand, and resourceful.</p></body></html>

    Creating headings
    Creating headings

    • Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines the smallest

    • HTML automatically adds an extra blank line before and after a heading.

    Line breaks
    Line breaks

    • To add a line break in a web page, you can use the <br> tag. Typing a <br> tag in your HTML code is similar to pressing the ENTER or RETURN key in a word processor.

    • The effect of <br> tag is that the browser stops printing text on that line and drops down to the next line on that page.

    • The <br> tag does not require a closing tag.

    Preformat text
    Preformat text

    • With the <pre> tag, the text renders in the browser exactly as you type it. The <pre> tag is short for preformat. So if you press the ENTER or RETURN key several times to create line breaks within a <pre> tag, you can expect to see all those line breaks in a browser.

    • The following shows the <pre> tag in use:

    • Syntax:





    Horizontal rules
    Horizontal rules

    • To break up an HTML document into separate sections, you can insert a horizontal line (rule). A horizontal rule is inserted by the <hr> tag. The <hr> tag is one-sided, meaning it does not require a closing tag.

    • Inserting horizontal lines<hr>

    Defining html

    • Horizontal rule of size 12:

    • <hr size="12" />

    • Horizontal rule of size 12 and width 20%:

    • <hr size="12" width="60%" />

    • Horizontal rule of size 12, width 60%, and aligned left:

    • <hr size="12" width="60%" align="left" />

    Divisions with the div tag
    Divisions (with the <div> tag)

    • To structure HTML documents into divisions or sections, the <div> tag is used.

    • The <div> tag specifies a logical block without predefined meaning or rendering infomration. Orginally, the tag was mostly used to align sections of content in a document with the align attribute.

    • example:

      <div align="right"><h4>Division heading</h4><p>Paragraph 1. This text is right-aligned. The div affects paragraph and other block elements.</p><p>Paragraph 2. This text is also right-aligned.</p></div>


    • Division heading

      Paragraph 1. This text is right-aligned. The div affects paragraph and other block elements.

      Paragraph 2. This text is also right-aligned.

    Html links
    HTML Links

    HTML uses the <a> anchor tag to create a link to another document or web page.

    • The Anchor Tag and the Href Attribute

    • The Target Attribute

    • Email Links

    • The Anchor Tag and the Name Attribute

    The anchor tag and the href attribute
    The Anchor Tag and the Href Attribute

    • An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

    • The syntax of creating an anchor:

      <a href="url">Text to be displayed</a>

      The <a> tag is used to create an anchor to link from, the href attribute is used to tell the address of the document or page we are linking to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

    The target attribute
    The Target Attribute

    • With the target attribute, you can define where the linked document will be opened. By default, the link will open in the current window. The code below will open the document in a new browser window:

    • <a href=“” target="_blank">Visit </a>

    Email links
    Email Links

    • To create an email link, you will use mailto: plus your email address.

    • <a href="">Email Help Desk</a>

    • To add a subject for the email message, we would add ?subject= after the email address.

      For example:

    • <a href=" Assistance">Email Help Desk</a>

    The anchor tag and the name attribute
    The Anchor Tag and the Name Attribute

    • The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly to a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Unlike an anchor that uses href, a named anchor doesn't change the appearance of the text

    • syntax of a named anchor:

    • <a name="top">Text to be displayed</a>

    Html images
    HTML Images

    • The Image Tag and the Src Attribute

    • The Alt Attribute

    • Image Dimensions

    The image tag and the src attrib ute
    The Image Tag and the Src Attribute

    • The <img> tag is empty, which means that it contains attributes only and it has no closing tag.

    • To display an image on a page, you need to use the src attribute. srcstands for "source".

    • The value of the src attribute is the URL of the image you want to display on your page.

    • The syntax of defining an image:


    The alt attribute
    The Alt Attribute

    • The alt attribute is used to define an alternate text for an image.

    • The value of the alt attribute is author-defined text:

      <imgsrc="graphics/chef.gif" alt="Smiling Happy abc">

    • The alt attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image.

    Image dimensions
    Image Dimensions

    • When you have an image, the browser usually figures out how big the image is all by itself. If you put in the image dimensions in pixels however, the browser simply reserves a space for the image, then

    • loads the rest of the page. Once the entire page is loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. The chef image would then be:

    • <imgsrc="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef">

    Html colors
    HTML Colors

    • Color Values

    • Colors are defined using a hexadecimal notation for the combination of red, green, and blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).

    Color names
    Color Names blue

    • A collection of color names is supported by most browsers.

    • Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow)

    Defining html
    Cont.. blue

    Html backgrounds
    HTML Backgrounds blue

    • The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.

    • Bgcolor

    • Background

    Bgcolor blue

    • The bgcolor attribute specifies a background-color for an HTML page.

    • The value of this attribute can be a hexadecimal number, an RGB value, or a color name:

    • <body bgcolor="#000000">

    • <body bgcolor="rgb(0,0,0)">

    • <body bgcolor="black">

    • The lines above all set the background-color to black.

    Background blue

    • The background attribute can also specify a background-image for an HTML page.

    • The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.

    • <body background="clouds.gif">

    Character tags
    Character tags: blue

    • A tag that is applied to an individual character is known as a character tag.

    • A character tag can be grouped into two categories: physical and logical. (Note: physical stylesare associated with physical character tags; logical stylesare associated with logical character tags.)

    • 1.Physical styles

      a physical character tagcontrols how the characters are formatted

    2 logical styles
    2. blue Logical styles

    • A logical character tagdescribes how the text is being used, not necessarily how it is formatted.

    Font tag
    Font tag blue

    • The <font> tag provides limited control over changing the appearance of the text.

    • The <font> tag in HTML is deprecated.

    • The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations.

    • In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements.

    • The <font> Tag Should NOT be used.

    Defining html
    Cont.. blue

    • Attributes:size,color,face

    • Size:size of our text with number value 1-7 only

    • Color:fontcolor,values are rgb,name,hexadecimal

    • Face:name of the font,font type

    • Ex:

      <font size=“5” color=“red” face=“arial”>

      This is font example </font>

    Html character entities
    HTML Character Entities blue

    • A character entity has three parts:

    • an ampersand (&),

    • an entity name or an entity number,

    • and finally a semicolon (;).

    • The & means we are beginning a special character,

    • the ; means ending a special character and the letters in between are sort of an ab.breviation for what it's for

    • Entities are case sensitive

    Defining html
    Cont.. blue

    Non breaking space
    Non-breaking Space blue

    • The most common character entity in HTML is the non-breaking space &nbsp;.

    • Normally HTML will truncate spaces in your text. If you add 10 spaces in your text, HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity.

    Example.. blue

    Marquee tag
    Marquee Tag blue

    • The HTML <marquee> tag is used for scrolling piece of text or image displayed either horizontally across or vertically down your web site page depending on the settings.


      <marquee>This is basic example of marquee</marquee>

    Html lists
    HTML lists blue

    • Lists are very important to any document as they allow you to make your key points stand out from the rest of the text. HTML supports three lists:

    • Unordered (Bulleted)

    • Ordered (Numbered)

    • Definition

    1 unordered bulleted list
    1.Unordered (bulleted) list blue

    • The most commonly used list is the unordered list.

    • An unordered list can be used whenever the order of items you want to list is unimportant.

    • HTML offers three different default characters to use with an unordered list:

    • a bullet ( ),

    • a circle ( ),

    • a square ( ).

    Basic syntax
    Basic syntax blue

    • <UL><LI> list item 1</LI><LI> list item 2</LI>...</UL>

    • Example:


      <LI> milk </LI>

      <LI> bread </LI>

      <LI> apples. </LI>


    Possible attributes
    Possible attributes blue

    • 1.compact:

      specifies that the list should render smaller than normal

    • 2.type:

      Specifies the kind of marker to use in the list.

      possible values are disc,square and circle.

    2 ordered numbered list
    2.Ordered (numbered) list blue

    • The other popular kind of list is the ordered list. This type of list can be used when the order of items to list is important.

    • An ordered list can be created with different styles:

    • Arabic numbers, lowercase or uppercase letters, or lowercase or uppercase Roman numerals.

    Syntax: blue

    • <OL><LI> list item 1<LI> list item 2...</OL>

    example blue

    3 definition list
    3.Definition list blue

    • The definition listis used far less frequently than the other two kinds of lists mentioned above.

    • A definition list, as the name implies, is used for listing definitions:

    Basic syntax1
    Basic syntax blue

    • <DL><DT>term 1<DD>definition of term 1<DT>term 2<DD>definition of term 2...</DL>

    Nested list
    Nested list blue

    • Lists can be nested, meaning one list can be placed inside of another.

    • Example:


      <li>Chapter One


      <li>Section One</li>

      <li>Section Two </li>

      <li>Section Three </li>



      <li>Chapter Two</li>

      <li>Chapter Three</li>