HTML Tags

Introduction to HTML
1. Container 7. Bulleted list

2. First web page 8. Numbered list
3. Headings and paragraphs 9. Images
4. More paragraphs 10. Link
5. Background 11. Table
6. Font
Container
<html> 
<head>
</head>
<body>
</body>
</html>
First Web Page

<html>
<head>
<title> My First Web Page </title> 
</head>
<body>
Hurray, I just did a my first web page
</body>
</html>
Headings and Paragraphs

1. Heading
<h1> This is Heading 1 </h1> 
<h2> This is Heading 2 </h2>
<HR> 
2. Paragraph
<p> This is a paragraph.</p>
More paragraphs
<p>
This paragraph contains a lot of lines in the source code, but the browser ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window. If you resize the
browser window, the number of lines in this paragraph will change.
</p>
Background
<body background="background.jpg">
</body>
Font
1. BACKGROUND COLOR
<body bgcolor="green"> 
2. BASEFONT
<basefont face="arial" size="4" color="#FF0000"> 
3. FONT COLOR
Hello! This is my page <br>
<font color="#FF0000" size="3" face="arial">
This local text looks different</font><br>
This text looks like the first one.
4. FONT FORMAT
A. Background Color
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:blue;">This is a paragraph.</p>
B. Font Style
<b>This text is bold.</b>  <br>

<i>This text is italic.</i>  <br>
<strong>This text is strong</strong>  <br>
<em>This text is emphasized</em> <br>
<u>This text is underlined. </u>  <br>
<small>This text is small</small>  <br>
<big>This text is small</big>  <br>
<font size="1"> This is the smallest font </font>  <br>
<font size="7"> This is the biggest font </font>  <br>
This is a <sup>superscript </sup> 
and <sub>subscript.</sub>  <br>
<strike>This text has a line. </strike> 
<br>
C. Delete and Insert

My favorite color is <del>Green</del> 
<ins>Yellow</ins> <br> 
D. Pre Element
<pre> 
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
E. The Q. Element
<h2>The q Element</h2> 
<p>The q element defines a short quotation.</p>
<p>WWF's goal is to:

<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<p><b>Note:</b> Browsers insert quotation marks around the q element.</p>
F. Definition List
<dl> 
<dt>January</dt> 
<dd>First month of the year.</dd> 
<dt>February</dt>
<dd>Second month of the year.</dd>
</dl>
5. FONT LAYOUT
A. Width of Horizontal Line
<hr width="75%">
B. Paragraph Alignment
<p align="left"> Paragraph alignment = LEFT </p>
<p align="right"> Paragraph alignment = RIGHT </p>
<p align="center"> Paragraph alignment = CENTER </p>
<p><center> Center Text </center></p>
<div align="center"> Center Text </div>
<div align="left"> Left Text </div>
<div align="right"> Right Text </div>
C. Non-Breaking Space

Non Breaking Space - A common character entity
used in HTML is the non breaking space.
6. ADDRESS
<address>
Dilbert H.<br />
1234 Anim Street<br />
P.O. Box 22222
</address>
7. ABBREVIATION and ACRONYM

<abbr title="Engineer">Engr.</abbr>
<br /><br />
<acronym title="Hyper Text Markup Language">HTML</acronym>
<br /><br />
<p>
Move your mouse over an abbreviation or acronym to get more data.
</p>
Bulleted list
Tag used <ul> </ul> - unnumbered list
1. Disc bullets list
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
2. Circle bullets list
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
3. Square bullets list
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
4. A nested List
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
<li>Milk</li>
</ul>
Numbered list
<ol> </ol> - ordered list
1. Numbered list
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
2. Numbered list starts at Number 5
<ol start="5">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
3. Letters list
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
4. Lowercase letters list
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
5. Roman numbers list
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
6. Lowercase Roman numbers list
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
7. Roman Number List starts at Number 7
<ol type="I" start="7">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
Images

1. Inserting Image
<img src="smiley.jpg" alt="Smiley face" width="42" height="42"> 
2. Size of the Image
<img src="smiley.jpg" alt="Smiley face" width="75" height="75"> 
3. Add Border to the Image
<img src="smiley.jpg" alt="Smiley face" width="42" height="42" border="2"> 
4. Add space and under image
<img src="smiley.jpg" alt="Smiley face" width="42" height="42" Hspace="25" Vspace="25"> 
5. Moving Image
<img src="smiley.gif" alt="moving smile" width="48" height="48"></p>
Note that the syntax of inserting a moving image is no different from a non-moving image.
6. An image from another folder:</p>
<img src="images/happy.jpg" alt="Sad Face" width="33" height="32"><p>An image from W3Schools: </p>
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" width="104"

height="142">
7. Alignment of Images
<img src="smiley.jpg" alt="Smiley face" width="42" height="42" align="left">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br>
<img src="smiley.jpg" alt="Smiley face" width="42" height="42" align="right"> 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br>
8. Image Link
1. Specific Website
<a href="http://www.yahoo.com" target="_blank"> 
<img src="smiley.jpg" width="100" height="100"> </a>
<p>Click on the image to go to Yahoo.</p>
2. Link to itself
<a href="smiley.jpg" target="_blank"> 
<img src="smiley.jpg" width="100" height="100"> </a>
<p>Click on the image to view the same image.</p>
Link
<a> </a> anchor tag
1. Color of the Link
<body link ="green" vlink="yellow" alink="red">

2. Creating Links
1. Open in new window
<a href="http://www.yahoo.com/">Click to go to Yahoo. </a> <br> 
2. Open in same window
<a href="http://www.yahoo.com/" target="_blank">Open yahoo in a new window!</a> 
3. Color On Text Links
<a href="http://www.yahoo.com/" target="_blank" ><font color="red">Open yahoo in a new window!
</font></a> 
4. Image Links
1. Same Page
<a href="link.html"> <img src="smiley.jpg" border="0" width="42" height="42" alt="link to this page">
</a> <br> 
2. New Page
<a href="images.htm" target="_blank"> <img src="smiley.gif" border="0" width="42" height="42"
alt="link to this page"> </a> <br> 
3. Link to Webpage
<a href="http://www.yahoo.com/"> <img src="smiley.jpg" border="0" width="42" height="42" alt="link
to yahoo"> </a> <br> 
5. Links Within a Page
<a href="#bottom">Click here to go to the bottom of the page</a>
<p>Batangas State University </p> Batangas State University </p> Batangas State University </p> Batangas
State University </p> Batangas State University </p> Batangas State University </p>
<p>Batangas State University </p> Batangas State University </p> Batangas State University </p> Batangas
State University </p> Batangas State University </p> Batangas State University </p>
<a name="bottom">The bottom of the page</a>
6. Link to Email
<a href="mailto:canadajefferson@gmail.com"> Email us </a>
Table
HTML tables start with a table tag.
Table rows start with a tr tag.
Table data start with a td tag.
<th> tag defines a header cell in an HTML table
1. 3 Rows and 3 Columns

<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>700</td>
<td>800</td>
<td>900</td>
</tr>
</table>
2. ColSpan
1. Column
<table>
<tr>
<td colspan = 2> Column 1 Merged </td>
</tr>
<tr>
<td>Column 1 Row 2</td> <td>Column 2 row 2</td>
</tr>
</table>
2. Row
<table>
<tr>
<td> Column 1 Row 1 </td><td rowspan =2>Row 1 Merged with Row 2</td>
</tr>
<tr>
<td>Column 1 Row 2</td>
</tr>
</table>
3. Table Alignment
Note: summary - The summary attribute provides information about the table's contents
<table border="1" summary="stock tracker">

<tr>
<th colspan="3">Stock Tracker</th>
</tr>
<tr>
<th>Stock Symbol</th>
<td>MSFT</td>
<td>GOOG</td>
</tr>
<tr>
<th>Profit</th>
<td>$723.48</td>
<td>$1254.58</td>
</tr>
</table>
<table align="right" bgcolor="yellow" border="3" summary="stock profits">

<tr>
<th colspan="3">Stock Tracker</th>
</tr>
<tr>
<th>Stock Symbol</th>
<td>MSFT</td>
<td>GOOG</td>
</tr>
<tr>
<th>Profit</th>
<td>$723.48</td>
<td>$1254.58</td>
</tr>
</table>
<p>
This example demonstrates multiple attributes as follows:
</p>
<p>
align - The table is aligned to the right. <br>
bgcolor - The background color is set using a color name. <br>
border - The border width is set to three pixels wide. <br>
summary - The summary attribute provides information about the table's contents. <br>
</p>
Forms
1. Input Type
<form>
<input type="text" name="username">
<input type="password" name="pwd">
<input type="button" value="Log-in">
<input type="checkbox" name="Log in">
</form>
2. Text Area
<form action="" height="50px">
<textarea name = ABOUT YOURSELF cols = "21" rows = "2">
First Name
</textarea>

Last Name
</textarea>

E-Mail
</textarea>

Re-enter E-mail
</textarea>
</form>
3. Drop Down Menu
<form action="">
Birthday:
<select name="Birthday:">
<option value="January">January</option>
<option value="February">February</option>
</select>
<form action="">
<select name="Day:">
<option value="01">01</option>
</select>
<form action="">
<select name="Year:">
<option value="">1985</option>
<option value="">1986</option>
</select>
</form>
</form>
</form>
4. Radio Button
<form>
Gender:
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
</form>

HTML Tags

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Tags

Încărcat de

Drepturi de autor:

Formate disponibile

Introduction to HTML

1. Container 7. Bulleted list

First Web Page

Headings and Paragraphs

<b>This text is bold.</b>  <br>

C. Delete and Insert

<p>WWF's goal is to:

7. ABBREVIATION and ACRONYM

<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" width="104"

1. 3 Rows and 3 Columns

<table border="1" summary="stock tracker">

<table align="right" bgcolor="yellow" border="3" summary="stock profits">

<textarea name = ABOUT YOURSELF cols = "21" rows = "2">

<textarea name = ABOUT YOURSELF cols = "46" rows = "2">

<textarea name = ABOUT YOURSELF cols = "46" rows = "2">

3. Drop Down Menu

S-ar putea să vă placă și