Scribd
Upload
152 views

HTML Tags

The document provides descriptions of various HTML tags used to structure and format content on web pages, including headings, paragraphs, links, images, and tables. It also covers CSS properties that can be used to style elements with options for fonts, colors, backgrounds, positioning, and more. Various lists, colspan, and other table attributes are described as well as how to add CSS styling rules internally through the <style> tag.

Uploaded by

Peer Mohamed Ismail
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
152 views

HTML Tags

The document provides descriptions of various HTML tags used to structure and format content on web pages, including headings, paragraphs, links, images, and tables. It also covers CSS properties that can be used to style elements with options for fonts, colors, backgrounds, positioning, and more. Various lists, colspan, and other table attributes are described as well as how to add CSS styling rules internally through the <style> tag.

Uploaded by

Peer Mohamed Ismail
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML Tags Sl# 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Tag <doctype html> <head> <title> Title Here </title> </head> <body> </body> <h1>Header 1 </h1> <h2>Header 2</h2> <p>This is a Paragraph</p> <br /> <strong> BOLD </strong> <em> Italics </em> <hr /> <!-- This is a comment --> <a> </a> <a href="http://www.google.com"> This is the GOOGLE link </a> <a href="second.html"> This is a link to a file</a> <a href="#second_para"> </a> <a name="second_para"> </a> <a href="mailto:[email protected]"> Mail to Peer </a> <a href="http://www.google.com" title="Awesome Search Engine> Google </a> <img src="myphoto.jpg"/> <a href=="http://www.thenewboston.com" > <img src="myphoto.jpg"/></a> <img src="myphoto.jpg" height="150"/></a> <table border="1"> <tr> <th>Name</th> <th>Quantity</th> </tr> <tr> <td>Apple</td> <td>10</td> </tr> <tr> <td>Banana</td> <td>20</td> </tr> </table> Dbl/ Single S Description Starting tag to indicate html type Header & Title tags

Body Tags h1..h6 six types of headers inside body

Break Row (line break) Bold face Emphasize (Italics) Horizontal Row (line divider) Comments Anchor (link) href is an attribute to a tag Link to another website Link to a file Link to a section in the same page Define the destination (give a name) Link to the destination using href Email link Tool Tip

15 16 17 18 19 20

Image display Converting an image into a link Resizing Images 150 pixels Image size is not reduced, but shrunk in size only Defining a Table tr = table row th = table header td = table data? Border = 1 pixel here A table with 2x3 size
Name Apple Banana Quantity 10 20

21

<table border="1"> <tr> <th colspan="2"> <h3>Healthy Fruits</h3></th> </table> <table border="1" width="500"> <table border="1" width="100%"> <table border="1" cellpadding="10"> <table border="1" cellspacing="10"> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>Go to Youtube</li> <li>Type in thenewbaston</li> <li>Enjoy the videos</li> </ol>

colspan - merging columns

Healthy Fruits
Quantity Apple 10 Banana 20 Table width 500 pixel / 100% (adjusts to screen size) cell padding adds 10 pixel space on all 4 sides of data cell spacing adds space between cells and splits the cells Unordered List and list items List item 1 List item 2 List item 3 Ordered List and list items 1. Go to Youtube 2. Type in thenewbaston 3. Enjoy the videos DHTML element (p, h1, h2) + {property:value;} p{font-family:arial;} h1{color:red;} ul{font-weight:bold} ol{font-style:italic} Name

22 23 24

25

26

<head> <style type="text/css"> </style> </head> color font-family font-weight font-style line-height text-align text-indent background-image background-repeat background-position padding padding top/bottom/left/right

27

blue ; (or RGB code from Photoshop #330256) arial; bold; italic; 150%; center; 25px (25 pixel); url(mypic.jpg); no-repeat /repeat-x/repeat-y (to have one image) 10px 60px or 50% 60px (50%-horizontally centered) 20px (space between text and the borders of the background)

XHTML Basic building blocks for a website main core elements: images, headings, paragraphs, texts, links CSS (Designer) Makes it pretty - nice layout, color, font

You might also like