Basics of HTML

Standardized by World Wide Web Consortium (W3C) Used to encode WWW documents (web pages) Document-layout and hyperlink
specification y yp p language Defines the syntax and placement of various media like text, images etc. to be displayed by the browser Marking up means additions of certain commands (in the form of tags) to our document in order to tell the browser how we want the document displayed
1961 - HTML 1994 HTML 2.0 1996 HTML 3.2 1997 HTML 4.0 1999 HTML 4 01 4.01 Today XHTML See http://w3c org/ http://w3c.org/
HTML Hyper Text Markup Language p g g SGML Standard Generalized Markup Language XML Extensible Markup Language XHTML - Extensible Hypertext Markup Language DHTML - Dynamic Hypertext Markup Language
HTML is structured in hierarchical order Organized in hierarchical fashion such as File management in computer ti t DOM Document Object Model
Basic structure <html> <head><title></title></head> <body></body> body /body </html> Syntax of the HTML language Behind the scene tags On screen tags
Tags Commands to do something g Elements Set of tags with content in between Attributes Modify the tags
All tags are contained within < and >. No spaces between the <, >, and the tag N b t th d th t text. Example: <html> No N spaces within tag text. ithi t t t Both opening and closing tags should be used (for closed tags) tags). Use the same case for all tag text, preferably lowercase text text. Keep horizontal symmetry.
HTML comments

Inserting a title
Only one title element is permitted <title>My Home Page</title>
<html> <head> <title>My First html page</title> </head> <body> Hello World! </body> </html> /
Inserting a paragraph
<p>This is a simple one sentence paragraph</p> <p>This second paragraph starts on its own line, with a little t line littl extra li space</p> /
Inserting line breaks

Browser attempts to display all text in a single continuous line This is first line <br> line.<br> This is second line. Inserting Horizontal line
A short poem <hr> <p>Mary had a little lamb<br> Whose fleece was white as snow
bboldface, iitalics, ttteletype etc. <p>This product is <b>new</b> and <b>improved</b>!</p> <p>This product is <i>new</i> and <i>improved</i>!</p> <p>This product is <b><i>new</i></b> and <b><i>improved</i></b>!</p> <p>The computer said <tt>"I want to compute."</tt></p> Elements can be nested
h1- through h6; numbers signify relative importance

<h1>HTML Tags</h1> <h2>The Body tag</h2> y g <h3>The paragraph tag</h3> The p tag is used to break text into paragraphs
Preserves white space entered into the source code Uses monospace font
<pre> <b> <hr> item CPU Disk Monitor Printer </pre> Specification Pentium-III 40 GB SVGA LaserJet Manufacturer</b> Intel Seagate Samsung HP
Used to create sections

80 GB hard disk is now Rs.<del>2500</del> 2000.</body>
Indenting text
Thus the story begins <blockquote> Ten thousand years ago <br> ago...<br> Men used to </blockquote>
Result
Description for all exists empty isin ni
Entity Name ∀ &exists; ∅ ∈ &ni; ∏ ∑ ≤ ≥ √
Entity Number ∀ ∃ ∅ ∈ ∋ ∏ ∑ ≤ ≥ √
prod sum Less of equal Greater or equal square root
Color Name AliceBlue AntiqueWhite Aqua Aquamarine Azure Beige Bisque Black BlanchedAlmond Blue BlueViolet Brown
Color HEX #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A
Color
Used to create sections

<div style= color:red > style="color:red"> This is first line of section1.<br> This is second line of section 1. </div> <div style="color:blue"> This is first line of section 2 <br> 2.<br> </div>
<ul> / <li>Africa</li> <li>Asia</li> <li>Australia</li> <li>Antarctica</li> / </ul>
<ol> <li>Choose Open from File menu</li> <li>Locate the file you wish to edit and Click on the filename</li> <li>Click the open button</li> </ol>
<ol> <li> Topic 1 <ul> <li>Topic 1.1</li> <li>Topic 1.2</li> <li>Topic 1.3</li> </ul> </li> <li> Topic 2 <ul> <li>Topic 2.1</li> <li>Topic 2 2</li> 2.2</li> <li>Topic 2.3</li> </ul> </li> </ol>
<dl> <dt>Triangle<dd>Three sided figure d Ti l dd Th id d fi <dt>Quadrilateral<dd>Four sided figure </dl>
<font face="Century Gothic" color="blue">Appearance of text</font><br> <font face="Times Roman" color="olive" size="6">depends on</font><br> <font face="Times Roman" color="#C0660C" size="5">font attributes</font>
Embedding images
<img src="earth.bmp"> <img src="earth.bmp" width=100 height=100>
<body background=Sunset.jpg> </body>
<body bgcolor="gold"> </body>
Creating Hypertext
Further details may be obtained in <a F th d t il b bt i d i < href="charter3.html">Chapter 3</a> of this document<br> Download the free software from <a href="http://www.microsoft.com">Microsoft H h f "htt // i ft ">Mi ft Home Page</a> Send me <a href="mailto:u_roy@it.jusl.ac.in">email</a>
<a href="bookmark.html#section3">go</a> <a name="section3">Section3</a> < " ti 3">S ti 3</ >
<a href="bookmark.html"> <font size=5 color="#008088"> <f t i 5 l "#008088"> Go to section 3 </font> </a>
Hyperlinks with images
Click the buttons below to go the previous or next Cli k h b b l h i pages<br> a href="chapter2.html"><img img <a href chapter2.html src="backward.jpg"></a> <a href="chapter4.html"><img src="forward.jpg"></a>
Specifying link colors S if i li k l
<body link="green" alink="red" vlink="gray">
Describes textual description for image Specifies something about the target document
Click the buttons below to go the previous or next pages<br> <a href="chapter2.html"><img src="backward.jpg" p page"></a> / alt="previous p g <a href="chapter4.html"><img src="forward.jpg" alt="next page"></a>
<acronym title="World Wide Web">WWW</acronym> uses <acronym title="HyperText Markup < titl "H T tM k Language">HTML</acronym>
A graphic that can be divided into multiple areas hi h b di id d i li l Each area can point to a different URL
Browser loads the URL on clicking the associated area B l d h li ki h i d
<img src="shapes.jpg" usemap="#mainmap"> g p jpg p p <map name="mainmap"> <area shape=circle coords="32,32,33" href="circle.html"> <area shape=rect coords="31 37 100 90" href="rect html"> coords="31,37,100,90" href="rect.html">
Base tag
Used to specify base URL for all links in this page
<head> <base href="e:\My Documents\html\Picture\"> </head> <body> <img src="shapes.jpg"> </body>
Keywords for search engines
<head> <title>My First html page</title> <meta name="keywords" content="html, JavaScript, Xml"> </body>
Redirecting to another page

<head>
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.yahoo.com"> </head>
Creating Tables
table tag
tr tag table row td tagtable column
<table> <tr> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> </tr> </table> /
Adding column header

th tag
<table> <tr> <th>Name</th> <th>OS</th> <th>OOP</th> </tr> <tr> <td>Sujay</td> <td>2</td> <td>3</td> </tr> <tr> <td>Tuhina</td> <td>4</td> <td>5</td> </tr> </table>
Adding a caption
caption tag
<table> <caption>Marks</caption> </table>
Adding border
border attributedefault width is 1 pixel
<table border> </table>
Adding column header

rowspan Colspan
number of rows caption spans number of columns caption spans
<table border> <caption>Marks table</caption> <tr><th rowspan=2>Name</th><th colspan=2>Marks</th></tr> </table>
Cell spacing and cell padding

cellspacingspacing between cells cellpaddinggap between edge and the content of cell
<table border cellspacing=10 cellpadding=5 width=300> </table>
Background color
bgcolor
<table border cellspacing=10 cellpadding=5 width=300 bgcolor="gold"> b l " ld"> </table>
Background color of a row/cell

bgcolor
<tr bgcolor="gold"><td>Sujay</td><td>2</td><td>3</td b l " ld"><td>S j </td><td>2</td><td>3</td ></tr> <tr bgcolor="olive"><td>Tuhina</td><td>4</td><td>5</ td></tr>
Used to send user supplied data to server program (CGI/JSP/ASP) over the Internet Form can contain interface elements such as text fields, buttons, checkboxes, radio buttons and selection lists th t l t users t enter t t and make l ti li t that let to t text d k choices Interfaces are defined by INPUT or SELECTION tag Elements are defined within FORM tag Data can be passed using submit button
INPUT tag, type is text Used to specify single line textual data, such as name, email address, login name etc.
<form> First Name<input type=text><br> Last N L Name<input type=text> i </form>
Attributes
size maxlength be
number of characters visible maximum number of characters that can typed
First Name <input type="text" size=5 maxlength=10> Middle Initial<input type="text" size=1> type text size 1> Last name <input type="text" size=5>
INPUT tag, type is password
<form> <table> <tr><td>login</td> <td><input type="text" size=10></td></tr> <tr><td>password</td> <td><input type="password" size=10></td></tr> </table> </form>
Used to specify true/false type options
<form> <input type="checkbox" checked>CPU <br> <input type="checkbox">RAM <br> <input type="checkbox">Disk </form>
Similar to checkbox, except that only one radio button in a group can be selected at a time Group is specified by NAME attribute
<input type="radio" name="CPU" checked>Pentium I<br> <input type="radio" name="CPU">Pentium II<br> <input type="radio" name="CPU">Pentium III<br> p yp <p> <input type="radio" name="ram">32 MB<br> <input type="radio" name="ram" checked>64 MB<br> <input type="radio" name="ram">128 MB<br>
Allows users to enter lines of text ROWS and COLS attributes fixes the number of rows and column of the visible portion of text area
<form> Tell us about your interest(maximumm of 100 words) <textarea cols=20 rows=5></textarea> l 20 5 / </form>
Allows users to select an item from pull down menu Options are included using OPTION tag SIZE determines how many items are visible MULTIPLE attribute allows the user to select multiple options at a time by holding down the shift k hif key
<form> <select> < l t> <option>CPU <option selected>Disk <option>RAM <option>Monitor
RESET button to clear contents of elements of a form SUBMIT button to send the content of a form
<form action="ckeck.jsp"> <f ti " k k j "> <input type="reset" value="Clear"> type reset value Clear > <input type="submit" value="Login"> </form> /

Basics of HTML

Încărcat de

Informații document

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

Basics of HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Standardized by World Wide Web Consortium (W3C) Used to encode WWW documents (web pages) Document-layout and hyperlink

Inserting line breaks

h1- through h6; numbers signify relative importance

Used to create sections

Description for all exists empty isin ni

prod sum Less of equal Greater or equal square root

Used to create sections

<ul> / <li>Africa</li> <li>Asia</li> <li>Australia</li> <li>Antarctica</li> / </ul>

<dl> <dt>Triangle<dd>Three sided figure d Ti l dd Th id d fi <dt>Quadrilateral<dd>Four sided figure </dl>

<body background=Sunset.jpg> </body>

<body bgcolor="gold"> </body>

<a href="bookmark.html#section3">go</a> <a name="section3">Section3</a> < " ti 3">S ti 3</ >

Hyperlinks with images

Specifying link colors S if i li k l

<body link="green" alink="red" vlink="gray">

<head> <base href="e:\My Documents\html\Picture\"> </head> <body> <img src="shapes.jpg"> </body>

Keywords for search engines

Redirecting to another page

<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.yahoo.com"> </head>

Adding column header

<table> <caption>Marks</caption> </table>

<table border> </table>

Adding column header

number of rows caption spans number of columns caption spans

<table border> <caption>Marks table</caption> <tr><th rowspan=2>Name</th><th colspan=2>Marks</th></tr> </table>

Cell spacing and cell padding

<table border cellspacing=10 cellpadding=5 width=300> </table>

<table border cellspacing=10 cellpadding=5 width=300 bgcolor="gold"> b l " ld"> </table>

Background color of a row/cell

<tr bgcolor="gold"><td>Sujay</td><td>2</td><td>3</td b l " ld"><td>S j </td><td>2</td><td>3</td ></tr> <tr bgcolor="olive"><td>Tuhina</td><td>4</td><td>5</ td></tr>

<form> First Name<input type=text><br> Last N L Name<input type=text> i </form>

number of characters visible maximum number of characters that can typed

INPUT tag, type is password

Used to specify true/false type options

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