HTML

HTML

html: Html is a publishing language that all computers understand. Html make skeletal of any website.

Full form of html: hyper text mark-up language

Extension: Extension of html is .htm or .html

Source code: The source code of a web page is constructed using a series of standardized keywords and abbreviations known as html.

Element: Each keyword or abbreviation in html is known as element. Each html element is like a command, which identifies what part of web page to address.

Tag: Element is enclosed in angle brackets <>. Angle brackets and html element assembly is known as a tag.

Version of HTML

Tags:

Structure of html tag: <element-name>

e.g.<html> </html>, <img>, <br>

Parts of tag: Majority of tags have two parts.

(1) Opening or starting tag       (2) Closing or end tag

Structure of opening tag: <element-name>

Structure of closing tag: </element-name>

#Closing tag differs by incorporating a forward slash (/).

Angle brackets <> : The angle brackets enclosing html elements keep them hidden behind the scenes of a web page. The elements do not appear on the web page itself. But rather they only act as a means to instruct the web browser how to display that which appears between the start tag and the end tag.

 

Types of tag:

Category #1

    1. Single tag / Open tag (no area cover)

e.g. <br>, <hr>

    1. Pair tag / Close tag (Area cover)

e.g. <p> </p>, <div> </div>

Category #2

    1. Basic Tags

e.g. <!DOCTYPE>, <html> </html>,<head> </head>, <body> <body>, <title> </title>

    1. Block Tags (Cover whole row/line area)

e.g. <p> </p>, <div> </div>, <ol> </ol>, <ul> <ul>, <li> <li>

    1. Inline Tags (no cover whole row/line area)

e.g. <span> </span>, <strong> </strong>

Details:

Block Tags:

Use of Block Elements: When writing up html source code, all line breaks created by pressing the ‘Enter’ key will not register as line breaks and will be ignored by the web browser on the web page. In order to create line breaks and format visible text into paragraphs, you will use block or block-level element

Difference between block elements and inline elements: The main difference between block elements and inline elements is that the end tag of a block element forces a line break in the visible text.

Attribute: Sub-command along with html element known as “attribute”, this supply extra information to the browser. Attribute is always put between quotation marks.

Structure of attribute: <tag attribute=”value”> …… </tag>

e.g. <p align=”center”> Hello word </p>

# here p called element, align called attribute center called value.

 

All contents of a web page written between <html> </html> tag.

Essential Web Page Structure: A web page created using html has an essential structure

Structure #1

Structure #2

Exercise

Write your first web page

1. Open notepad

2. Write following code

3. Save As file with .html extension. (like index.html)

4. Open file with chrome.

Result Your first web page

#There are mainly two tags under <html> </html> tag.

1. <head> </head>

2. <body> </body>

Structure

There are Tags under <head> </head> tag.

    1. <title> </title>
    2. <style> </style>
    3. <meta>
    4. <link>
    5. <base>
etc Structure  

There are Tags under <body> </body> tag.

    1. <h1> </h1>
    2. <p> </p>
    3. <div> </div>
    4. <table> </table>
    5. <form> </form>
etc Structure

Common tag: <script> </script> (script tag used under both head and body tag)

HTML Tags (Details)

Title: Adding a title to a web page

(Title: A title that appears in the title bar that runs across the very top of the web page)

<title> </title>

Example Result Adding a title to a web page  

Body: Adding content on a web page.

<body> </body>

Example Result Hello world.

Heading and Subheading: (If would you like to format the text into title and subtitles on your web page)

<h1> … <h1>

<h2> … <h2>

<h3> … <h3>

<h4> … <h4>

<h5> … <h5>

<h6> … <h6>

Example Result

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
 

Miscellaneous tags

Line Break: Forcing a Line Break

<br>

Details: The all-purpose br element forces a line break anytime you want without having to place the text within a block level element.

# br element known as ’empty’ element

Example Result This is the first line.
Lorem ipsum dolor sit amet consectetur adipisicing elit.

Expedita sit a consequuntur optio repudiandae magnam impedit quia. Maiores, illo saepe.

Font: Font tag have many attributes. Without attribute font tag have no effect.

<font> </font>

Font face: You can designate what typeface a browser will use to display the text on your web page.

<font face=””> </font>

Example Result This is Arial

Other Font Styles

bold

<b> </b>

Example Result Hello world

italic

<i> </i>

Example Result Hello world

Underline

<u> </u>

Example Result Hello world

Strike-through

<s> </s>

Example Result Hello world

Making Paragraphs

p (paragraph): Render text into paragraphs with a blank line in between each.

<p> </p>

Details: Creating paragraphs using html is accomplished by placing the text which rendered as a paragraph in between the p p tag. The end /p tag terminates the paragraph while a new start p tag beings a new paragraph.

Example Result

Lorem ipsum dolor, sit amet consectetur adipisicing elit. In ea, nisi veniam cum natus repellendus nam distinctio aspernatur accusantium at.

Graphics

Image: Image tag have many attributes. Without any attributes img tag have no effect.

<img>

Structure

<img src=”graphic file name”>

or

<img src=”filename.ext”>

# Where filename.ext is the full name (including file extention) of the graphic or image you wish to display

File formats: Web graphics are generally served up in one of two formats: GIF or JPEG. Hence GIFs carry the .gif file extension and JPEGs carry the .jpeg or .jpg file extension.

Example Result

File Address

Relative file address: When html file and graphics file is in same folder, we use only file name with extention

Result

Absolute file address: When we write full path of graphics

Result

Creating Hyperlinks

Anchor tag: The most powerful and widely used of all html elements.

<a> </a>

Structure

<a href=”valid web address”> … </a>

# Where valid web addresss equals any existing URL (Uniform Resource Locator)

Example Result Welcome to Shahid Study

Horizontal rules: Horizontal line

<hr>

Example Result

Making lists

Unordered list

Example Result

List of some colors

  • Red
  • Green

Ordered list

Example Result

List of some colors

  1. Red
  2. Green

Creating Table

tr: (table row) tr create table row

td: (table data) td create table column

Structure

Example Result
row1 column1 row1 column2
row2 column1 row2 column2

table border

Example Result
row1 column1 row1 column2
row2 column1 row2 column2

Forms

Example Result
Write your name:

Write about your self in 5 sentence:

Gender:

marquee

Example Result Welcome

symbol & character

Character Name code
< less than &
> greater than &
“ quotation mark &
& ampersand &
  non-breakable space &
| broken vertical bar &
© COPYRIGHT SIGN &
® REGISTERED SIGN &
™ TRADEMARK &
← LEFTWARDS ARROW &
↑ UPWARDS ARROW &
→ RIGHTWARDS ARROW &
↓ DOWNWARDS ARROW &

Color code

Color-name hexadecimal color code color
Black #000000  
Silver #c0c0c0  
Gray #808080  
White #ffffff  
Maroon #800000  
Red #ff0000  
Purple #800080  
Fuchsia #ff00ff  
Green #008000  
Lime #00ff00  
Olive #808000  
Yellow #ffff00  
Navy #000080  
Blue #0000ff  
Teal #008080  
Aqua #00ffff