Scribd
Upload
17 views

HTML Review

This document provides an overview of HTML/CSS tags and structures for web development. It includes the basic HTML page structure, common text formatting tags like headings and paragraphs, links, images, tables, lists, forms, and frames. It also discusses inline styles, external style sheets, and exercises the reader to create a home page and work on a term project home page.

Uploaded by

Babak Rezai
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views

HTML Review

This document provides an overview of HTML/CSS tags and structures for web development. It includes the basic HTML page structure, common text formatting tags like headings and paragraphs, links, images, tables, lists, forms, and frames. It also discusses inline styles, external style sheets, and exercises the reader to create a home page and work on a term project home page.

Uploaded by

Babak Rezai
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

HTML/CSS Review

CA 86/CIS 86 Web development with PHP and MySQL

Tutorial

http://www.w3schools.com/html/default.asp

BASIC Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso8859-1" /> <title> Page Title</title> </head> <body> <p> Body Text </p> </body> </html>

Basic Tags


HTML Headings, <h1>..<h6>


<h1>This is a heading</h1> <h3>This is a heading</h3>

Paragraphs: <p>
<p> sample paragraph</p>

HTML Hyperlink : <a>


<a href="http://google.com">Link to google</a>

HTML Images : <img>


<img src="showcase.png" alt="PHP Project Show Case" />

Links Tag


Ordinary link:
<a href="http://www.example.com/">Link-text goes here</a>

Image-link:
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>

Mailto link:
<a href="mailto:[email protected]">Send email</a>

Formatting Tags

<b> <big> <em> <i> <small> <strong> <sub> <sup>

Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text

Inline Style


Background:


<p style="background-color:green">This is a paragraph.</p> <p style="font-family:arial;color:red;fontsize:20px;">A paragraph.</p> <h1 style="text-align:center">This is a heading</h1>

Font:


Alignment:


HTML Table Tags


<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

HTML Lists


Unordered List:
<ul> <li>Coffee</li> <li>Milk</li> </ul>

Ordered List:
<ol> <li>Coffee</li> <li>Milk</li> </ol>

HTML Forms
<form name="input" action="html_form_action.asp" method="get"> User name: <input type="text" name="firstname" /><br /> Password: <input type="password" name="pwd" /> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car <input type="submit" value="Submit" /> </form>

HTML Frames
<frameset cols="25%,75%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset>

Style Sheets
External Style Sheets:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

Sample line in mystyle.css


H1 { BORDER: #101010 1px solid; FONT-WEIGHT: bolder; TEXT-ALIGN: center; }

Exercise
 

Create your home page Work on the term project home page

You might also like