Hyper Text Markup Language (HTML) Basics

Hyper Text Markup Language 2011
HTML
HTML (Hyper Text Markup Language) is a language used to create web documents. It defines the syntax and placement of the element that make up of the structure of a web document. All web page elements are identified by special tags.
Tag
It is a command that tells the browser what to do. A tag consists of element name and option list attributes. The element and the attributes appear between angled bracket <>. There are two types of tags. 1. Container tags: Have start and end tags. Example: <b></b>, to make a text bold. 2. Stand alone tags: Have start tag only. Example: <hr> horizontal line
Attributes
Are added with in a tag to extend or modify the tag action. Always go in start tag Can have more than on attribute in a tag, separated in space. Syntax: <Tag name Attribute1 name=Value attribte2 name=value> Example: <body bgcolor=red text=#dfcdfa> Example: Assume you have a tag whose element name is I, and assume a tag is a container. Enclose the text Internet programming by this tag. Also we can nest tags with in inside of other tags. Example: <b><i> Text here</i></b>
Information that a browser ignores

Line break Multi space tabs Unrecognized tags Text in comment. You can include a text in comment like <!-- > < -- >
Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

HTML Document Structure
A typical html document has two major parts, i.e Head and body. o o Head: contains information about the document such as title, creator.. Body: contains the information about the document content. Example: <HTML> <head> <title> </title </head <body> Document content here </body> </HTML> <Meta> tag is an other tag that is used in head tag, which is used for client-pull. Meta tag have attribute like HTTP-EQUIV and CONTENT. Example: <HTML> <head> <title> Client Pull </title <meta http-equiv=refresh content=10;url= URLADRESS> </head <body> Document content here </body> </HTML> This document refreshes it self with range of 10 seconds and expressed in content attribute to the url specified by URLADRESS. Exercise:: Design three HTML document that loop endlessly at the interval of 15 second. Body of a document The body of a document is delimited by a <body> </body> tag. It contains the content of the document. You can make global setting by using the following attributes. I. II. Background=path to add background picture/ image. Bgcolor=color to add background color

III. IV. Text=coolor to change color of text Bgproperties=fixed we use when in background affect.
Note: color can be either in name or in hexadecimal value for (R-G-B). <HTML> <head> <title> </title </head <body bgcolor=#fdca23 text=blue> Document content here </body> </HTML> Note: when you use background and bgcolor properties at the same times priority is given for the back ground, and hence using them together is inadvisable. Text Formatting 1. Paragraphs and heading: a. Paragraphs <p>.</p> tag is used. Denotes the beginning and end of paragraph. Have properties like Align=center, left, right Example: <p align=center> Text here</p> <blockquote>..</blockquote> to add indent from left and right. b. Heading They are block level elements They are from<h1>..</h1> to <h6>.</h6> 2. Text Appearance They are inline elements. Example: o <b></b> to make a text bold o <i></i> to make a text italic o <u></u> to make a text underline o <s></s> to make strike through o <sup>.</sup>- to make super script o <sub>..</sup> to make subscript
Example: Develop HTML document that displays H2 + O 2 H2O and X2 + Y2 Z2
Exercise:: List more text appearance tags. 3. Spacing and positioning Example: o <br> - insert line break or new line o <center>----</center> to make the text at the center o <pre>----</pre> the text appear as it was in its format when edited in text editor. o <nobr>---</nobr> the text will appear in one line only, and the browser creates horizontal scroll bar. Exercise:: 1. develop html code that display the following Name Henok Dave Zelalem ID 676 545 232 Dept IT TVET EEng
2. What is the output of the following code <HTML> <head> <title> </title </head <body> A <br> B C <br> D </body>

</HTML>
4. Lists: In html there are three basic list styles. a. Unordered Lists: o They are bulleted style o Use <li></li> tag o Produced by <ul>---</ul> tag b. Ordered Lists: o They are numbered style o Use <li></li> tag o Produced by <ol>---</ol> tag c. Definition lists: o Lists enclosed by <dl></dl> tag and have: o Terms which are created by <dt></dt> o Definition which are created by <dd>---</dd> Note: It is possible to use type attribute to change the bulleting and numbering style. For unordered type=disc/ circle/ square/ but the default is disk For ordered type= 1/I/ I / A / a but default is 1 Exercise:: Write html code that display the following Computer Electronic machine RAM Random Access Memory TCP/IP Transmission protocol
Africa Ethiopia Kenya
Asia

China Japan
1. Africa a. Ethiopia i. Adama ii. Addis Abeba b. Kenya 2. Asia a. China b. Japan
5.
Character entity reference

Is used to display special symbols < &lt > .&gt . &copy
..&reg
Exercise:s: 1. List more character entity reference 2. Develop the following html tag out put <B> <i> <U> To make bold To make italic to make underline
Creating Links
The anchor <a> tag is used to create links in html, which identifies a string or image which serve as a link. <a href=URL path>Displayed text</a> The anchor<a> tag has target attribute which shows where to open the document either in new window or parent. That is <a href=# target=_blank></a> The URL can be absolute of relative. Absolute addressing:

o All full path of file or image is required. Relative addressing: o The full path is not necessary, instead .. operator is used to move one path above the current file directory.
Example: 1. Create a link to z.html in both cases for the following directory. Assume you are in y.html file. C:\ A B Z.html Exercise:: Read more about advantages of relative addressing and absolute addressing. Adding Images <Img>> tag insert an image in to the document text flow. This tag is stand alone tag. <img src=URL path> Also use can use image as a link in <a> tag. <a href=URL path> <img src=URL Path></a> Some attributes of <img> tag Alt used to supply alternative text if the image not displayed. Width=number specify width of image Height=number specify height of image Align=bottom/ middle/ top and Left, Right X.html y.html
Horizontal Rule
<hr> tag is used to add horizontal line. May be the line is larger or smaller then the text. Attributes of <Hr> tag Size=thickness of line Width=length of line in number of pixel NB: pixel is the minimum dot that a computer can draw.

Tables
In html tables are made up from cells, arranged in to rows. Minimum tags to describe a table are: o <table> beginning and end of table o <tr> specify the raw o <td> specifies the cell Example: <HTML> <head> <title> </title </head <body> <table> <tr> <td> Cell one</td> <td> Cell two</td> </tr> <tr> <td> Cell three</td> <td> Cell three</td>
</tr> </table> </body> </HTML> <th> tag can be used for heading, and similarly act as <td> tag. The only difference in the <th> tag the text are bold. <caption> tag used to add description for a table.

<HTML> <head> <title> </title </head <body> <table> <caption> Student list</caption> <tr> <th>Name</th> <th> ID</th> <th> Dept</th> </tr> <tr> <td> A</td> <td> 18</td> <td> IT</td>
</tr> <tr> <td> D</td> <td> 19</td> <td> Law</td>
</tr> </table> </body> Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

</HTML> Spacing rows and columns of a table Cell in the table can occupy the space of more than one cell in a table raw or column. This behavior is set with <th> or <td> tags using colspan and rowspan attributes. i. e colspan=value rowspan=value Example: <html> <head> <body> <table> <tr> <td colspan=2>Cell 1</td> <td >Cell 2</td> </tr> <tr> <td >Cell 3</td> <td rowspan=2>Cell 4</td> <td>Cell 6</td> </tr> <tr> <td >Cell 5</td> <td >Cell 6</td> </tr> </table> </body> </html> </head>
10

Exercise: 1. What is the out put of the following html code. <html> <body> <table> <tr> <td rowspan=2>Cell1</td> <td >Cell1</td> </tr> <tr> <td>Cell 3</td> </tr> </table> </body> </html> 2. Write html that develop the following table.
Department Information Techonologies
Devision Regular
Course Internet prog. Adv Prog. Maintenance Internet Prog. COA
Total TVET Total
Price 200 300 400 900 200 300 500
Monthly
225 125
Affecting appearance of a table The followings are some of the attributes that use for affecting display of a table. Border: affect the display of a boarder of around and with in a table. o Syntax: <table border=value>
11

Frame: controls the display of the boarder around each of the out edges of the table. o Frame=void no frame o Frame= above above line border o Frame=below lower line border o Frame=hsides horizontal line border o Frame=vsides vertical lines border o Frame=lhs left side line border o Frame=rhs right side line border o Frame=box all border Rules: determine which rules appear between cells with in a table. o Rule=none / groups/ rows/ cols/ all o It is not possible to use rule=groups with out grouping cells. o To group cells use <Colgroups></colgroup> <tbody>, <thead>, <tfoot> tags Exercise:: read more about cell grouping Example: <table border=1 frame=above rules=cells> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> <tr> </tr> </table> Table cell spacing There are two types of cell spacing that can be added in to table.
12

Cellspacing space between table cells Cellpading space between cell border and cell text. Example: <table border=1 cellpading=4 cellsapcing=2> Coloring a table It is possible to use bgcolor attribute in <table>, <tr>, <td> tags to set the background color of a table. <table bgcolor=color> the whole table color <tr bgcolor=color> the row of a table <td bgcolor=color the cell of a table
Frames
Frames are methods of dividing the browser window in to smaller sub windows, each displaying a different HTML document. To divide a window Frameset documents are fundamentally different from other html documents in that they use the <frame> tag instead of <body> tag. Establishing rows and columns Rows and cols attributes of < frameset> tag are used to set the rows and columns respectively. Example: <html> <head> <title>Frame example</title> </head> <frameset cols=*, *> <frame src=1.html> <frame src=2.html> </frameset> </html> NB: the row and column number can be written in percent(%) like 20%.
13

Nesting of frames It is possible to nest one frameset with in other frameset. Example: <html> <head> <title>Nesting</title> </head> <frameset cols=*,*,*> <frame src=1.html> <frameset rows=*,*> <frame src=2.html> <frame src=3.html> </frameset> <frame src=.html> <frameset> </html> Exercise:: Develop html code that divides the window in following format. 1. 2. 3. 4.
5.
1.
2. 4. 7.
3. 5. 8.
6. 9.
14

Inline/ floating frames Inline frames allow adding a scrollable content inside a normal html document. Use <iframe src=path width=value height=value> </iframe>
Forms
A from allow us to accept input from the user. There are varieties of elements that can be used for gathering information. Elements in a form tag are enclosed by <form> ..</form> tag. The following are some of the attributes o Name name of the form o ID identifies uniquely the form o Action URL of an application that process the data in the form. o Method used to submit the form. Have get/ post value. Form elements 1. Input controls: Created using <input> tag. Type attribute specifies the type of the control. Text/ password/ checkbox/ radio/ submit/ reset/ file/ button are possible values of type attribute. 2. Text Area: Multi line text box. Created <textarea></textarea> tag Have cols and rows attribute in the <textarea> tag. 3. Menus: Commonly used menus are drop down menu and list box. Created using <select> .</select>tag Size attribute in <select> tag is used to indicate number of lines displayed under the drop menu. <Option> . </option> tag is used to indicate the list of items. Example: simple login form <form name=login> Username <input type=text name=login> <br> Password<input type=password name=pswd> <br> <input type=submit name=submit value=login>
15

<input type=reset name=rst value=clear > </form>.. Exercise: Develop a student registration form Name: ID: Dept: Sex Photo: Other: Browse
Register
Clear
16

Hyper Text Markup Language (HTML) Basics

Încărcat de

Informații document

Descriere 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

Hyper Text Markup Language (HTML) Basics

Încărcat de

Drepturi de autor:

Formate disponibile

Hyper Text Markup Language 2011

Information that a browser ignores

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Example: Develop HTML document that displays H2 + O 2 H2O and X2 + Y2 Z2

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Africa Ethiopia Kenya

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Character entity reference

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

</tr> <tr> <td> D</td> <td> 19</td> <td> Law</td>

</tr> </table> </body> Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Department Information Techonologies

Course Internet prog. Adv Prog. Maintenance Internet Prog. COA

Total TVET Total

Price 200 300 400 900 200 300 500

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

Hyper Text Markup Language 2011

Alemnew Sheferaw (alemnewsh@gmail.com), Adama University

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