HTML The Mother Tongue of The Browser Web
HTML The Mother Tongue of The Browser
Web Site
World Wide Web n n The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience: ¨A uniform naming scheme for locating resources on the Web (e. g. , URLs). ¨ Protocols, for access to named resources over the Web (e. g. , HTTP). ¨ Hypertext, for easy navigation among resources (e. g. , HTML).
Web Programming n Programming for the World Wide Web involves both ¨ server-side programming, and ¨ client-side (browser-side) programming. ¨ The publishing language used by the World Wide Web is HTML.
Web Programming n Servers make web documents, which are specified in HTML, available on request to browsers. n Browsers display, to users, web documents which have been received from servers.
HTML Background n HTML stands for “Hyper Text Mark-up Language”. n The language used to design Web Page. n HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. n HTML standards are organized by W 3 C : http: //www. w 3. org/Mark. Up/
Hyper-Text-Markup-Language n n Hyper is the method by which you move around on the web. Text is self-explanatory. Mark-up is what you do with the text. You are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on. Language is what HTML is. It uses many English words. Simply, HTML is a Language, as it has code-words and syntax like any other language.
HTML n HTML is used for creating static web pages. n It is designed to display data & focus on how data looks. n HTML’s role on the web is to tell the browser how a document should appear. n HTML was the only language one could use to create Web pages. n HTML is about displaying information.
HTML Functionalities n HTML gives authors the means to: ¨ Publish online documents with headings, text, tables, lists, photos, etc. n Include spread-sheets, video clips, sound clips, and other applications directly in their documents. ¨ Link information via hypertext links, at the click of a button. ¨ Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
HTML Versions n HTML 2. 0 was developed by the IETF's HTML Working Group, which set the standard for core HTML features based upon current practice in 1994. n HTML 3. 2 was W 3 C's first Recommendation for HTML on January 14, 1997. n HTML 4. 0 was first released as a W 3 C Recommendation on December 18 , 1997. n HTML 4. 01 is a revision of the HTML 4. 0 became a W 3 C Recommendation December 24, 1999. n XHTML is a stricter and cleaner version of HTML. n HTML 5 is the next major version of HTML.
Sample Webpage
Sample Webpage HTML Structure <html> <head> <title>First Demo</title> </head> <body> <p>Welcome all</p> <!-- The content of the document --> </body> </html> Title tags Body tags
HTML Basic Structure n n n HTML documents contain text and various tags that define elements such as headings, paragraphs and Hyperlinks. Each element describes how the document should be displayed. An HTML document is divided into a ¨ head section n The title of the document appears in the head (along with other information about the document). ¨ body section n The content of the document appears in the body.
HTML Element Syntax <start_of_tag attribute_name=“attribute value”> Content </end_of_tag> HTML elements can have attributes. n Attributes provide additional information n Each element has a number of properties associated with it: the element. about ¨ An HTML element starts with a start tag / opening tag. n Attributes are always specified in the ¨ An HTML element ends with an end tag / closing tag. ¨ The element content is everything between the start and start tag. the end tag. ¨ Some HTML elements have empty content. n Attributes come in name/value pairs like: ¨ Empty elements are closed in the start tag. name="value“. ¨ Most HTML elements can have attributes. n ¨ HTML documents consist of nested HTML elements. n Most elements can contain other HTML elements.
General Element Attributes n Core Attributes ¨ Not valid in base, head, html, meta, script, style, and title elements. Attribute Value Description classname Specifies a classname for an element id id Specifies a unique id for an element style_definition Specifies an inline style for an element title text Specifies extra information about an element
HTML Document Elements Hierarchy document head title p button body meta h 1 -h 6 input script anchor label style form legend image select tables style textarea script Head Body
<meta> Tag n Meta tags are used to store information usually relevant to browsers and search engines. ¨ ¨ Define the author of the document as well as the content of the webpage. provides additional information about the page; for example, which character encoding the page uses, a summary of the page’s content, instructions to search engines about whether or not to index content, and so on. <meta name="description" content="an html tutorial“ /> <meta name="keywords" content="html, webdesign, javascript“ /> <meta name="author" content="bill gates“ /> <meta http-equiv="refresh" content="5; url=http: //www. abc. com“ /> Example!
Inside <body> Section n Text ¨ Formatting ¨ Resizing ¨ Layout ¨ Listing Images ¨ Inserting images (GIF & jpg) ¨ Adding a link to an image Links ¨ To local pages ¨ To pages at other sites ¨ To bookmarks n Background ¨ Colors ¨ Images n Tables n Frames n Forms
HTML Text n The <font> tag will change the font. <font color="red" face="arial" size="2"> This local text looks different. </font>
Text Format Appearance Tag Description <b>text</b> writes text as bold <i>text</i> writes text in italics <u>text</u> writes underlined text <strike>text</strike> strikes a line through the text <strong>text<strong> usually makes text bold
Text Size Appearance Tag <big>text</big> Description increase the size by one <small>text</small> decrease the size by one <h 1>text</h 1> writes text in biggest heading <h 6>text</h 6> writes text in smallest heading <hr/> Defines a horizontal line
Text Layout Tag Description <p>text</p> Adds a paragraph break after the text. (2 linebreaks). <p align="left|center|right"> text </p> Left justify text in paragraph. text<br/> Adds a single linebreak where the tag is. <center>text</center> Center text. <div align="left|center|right "> text</div> Defines a section in a document. Note: dir can be used instead of align
HTML Lists n HTML supports ¨ ordered “Numbered” lists, ¨ unordered “Bulleted” lists and ¨ definition lists.
Numbered List Attribute Value Description start number Use styles instead. Specifies the start point in a list type Number Use styles instead. Capital letter Specifies which kind of bullet Small letter points will be used Capital Roman # Small Roman # <ol start="5"> <li>text</li> </ol> <ol type=“A"> <li>text</li> </ol>
Bulleted Lists n You have the following bullet options: ¨ disc ¨ circle ¨ square <ul type=“circle”> <li>text</li> </ul> <ul type="disc"> <ul type="circle"> <ul type="square">
Definition List n n The <dd> tag is used to describe an item in a definition list. The <dd> tag is used in conjunction with <dl> (defines the definition list) and <dt> (defines the item in the list). <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> Example!
HTML Images <img src=“" width="" height="“ align=“” alt=“” hspace="" vspace=""> n Images types used in browsers are : . gif &. jpg <img src=“abc. gif"> <img src=“http: //www. xyz. com/abc. gif"> n Resizing <img src=“abc. gif" width="60" height="60">
HTML Images n Alignment of Images You can align images according to the text around it Default, left, right, top, texttop, middle, center. n Alternative Text <img src=“logo. gif" alt="This is a text that goes with the image"> Example!
HTML Links <a href="url“ target=“”>Link text</a> Click <a href="http: //www. yahoo. com">here</a> yahoo. The target can be oneto ofgo theto following Values to identify where the link is loaded : "_blank“ Loads the link into a new n Link targets blanktarget="_blank"> window. <a href="http: //www. yahoo. com" "_self“ Loads the link into the same window. (default) n Image link <a href="myfile. htm"><img src="rainbow. gif"></a>
HTML Links n Link to email <a href="mailto: youremailaddress">Email Me</a> <a href="mailto: email@hotmail. com? subject=Sweet. Words">Send Email</a>
HTML Links n Link Within a Page ¨ To n n link to an anchor you need to: Create a link pointing to the anchor Create the anchor itself. <a name =“chapter 4”></a> Click <a href=“# chapter 4”>here</a> to read chapter 4 <a name =“top”></a> Click <a href=“#top”>Top</a> Example!
<marquee> Tag n <marquee attribute 1 attribute 2>moving text< / marquee > (IE) Places a scrolling text marquee into the document. Example!
Forms
Sample Form Design
HTML Forms <form> <!-- Here goes form fields and HTML --> </form> n <form> Main Attributes n action=address ¨ n Specifies where to send the form-data when a form is submitted. method=post or method=get ¨ Specifies how to send form-data.
Form Fields n A <form> can contain <input> elements: ¨ ¨ ¨ ¨ ¨ n Text field Password field Hidden field Check box File Submit button Reset button Image button Radio button Other elements: ¨ ¨ ¨ <textarea> <label> Drop-down menu
<input> Text Field Attributes n n n size maxlength name value align tabindex: Specifies the tab order of an element. <input type="text" size="25" value="Enter your name here!">
<input> Password Field Attributes n n n size maxlength name value align tabindex Enter Password : <input type="password" size="25">
<input> file Field n n Used for file uploads. When used, two controls appear in the browser: a field that looks similar to a text input, and ¨ a button control that’s labeled Browse…. The text that appears on this button can’t be changed. ¨ n accept attribute, is used to define the kinds of files that may be uploaded. ¨ Browser support for this attribute is inconsistent, however, the job of validating file uploads is best left to the server. <input type="file" name="picture" id="picture“ accept="image/jpeg, image/gif"/>
<textarea> Field Attributes n n n rows cols Name tabindex readonly disabled <textarea cols="40" rows="5" name="myname"> Now we are inside the area - which is nice. </textarea>
<input> Checkbox Field Attributes n n name value align tabindex Checked <input type="checkbox" name="option 1" value="Milk"> Milk <input type="checkbox" name="option 2" value="Butter" checked> Butter
<input> Radio Button Field Attributes n n name value align tabindex checked <input type="radio" name="group 1" value="Milk"> Milk <input type="radio" name="group 1" value="Butter" checked =“checked”> Butter <input type="radio" name="group 1" value="Cheese"> Cheese
Drop-Down Menu Tags n <select> Attributes name ¨ size ¨ multiple ¨ n <option> Attributes selected ¨ value ¨ <select> <option>Milk</option> <option selected>Coffee</option> <option>Tea</option> </select>
<input> Submit button / Reset button Attributes n n name value align tabindex <input type="button" value="Hello world!">
<input> Image button n n Image buttons have the same effect as submit buttons Attributes ¨ ¨ ¨ ¨ name src align border width Height tabindex <input type="image" src=“abc. gif" name="image" width="60" height="60"> Example!
Frames
Sample Web Page Designed Using Frames
Frames n Frames allow multi-windowed layout. ¨ i. e. splitting a single Web page into multiple windows, each of which can open a different document. n Frames are independent, scrollable portions of a Web browser window, with each frame capable of displaying a different document.
Frames Tag Description <frameset> Defines a set of frames <frame> Defines a sub window (a frame) <noframes> Defines a noframe section for browsers that do not handle frames <iframe> Defines an inline sub window (frame)
HTML <frame> Attributes Attribute Value Description Frameborder 0 1 Specifies whether or not to display a border around a frame Marginheight pixels Specifies the top and bottom margins of a frame Marginwidth pixels Specifies the left and right margins of a frame name Specifies the name of a frame noresize Specifies that a frame cannot be resized scrolling Yes no auto Specifies whether or not to display scrollbars in a frame Height Pixel | % Set height of frame Width Pixel | % Set width of frame Bordercolor rgb(x, x, x) #xxxxxx colorname sets color for the border of frame src URL Specifies the URL of the document to show in a frame
HTML <frameset> Attributes Attribute Description border Define border width of frames inside frameset. =pixel count Frameborder Controles border of frames whether to display a border or not Yes | no Cols (pixels, %, *) Specifies the number and size of columns of frame in a frameset Rows (pixels, %, *) Specifies the number and size of rows of frame in a frameset framespacing Spacing in pixels between frames
Web Page Design 620 pixels 1) newspaper logo 120 pixels 2) list of links 500 pixels 3) articles 4) address and phone number
Creating Frames n You divide a document into frames using the <frameset> element. n The <frame> element and other <frameset> elements are the only items that you can place inside a <frameset> element.
Creating Frames n Two attributes of the <frameset> element, rows and cols, determine whether frames are created as rows or columns ¨ The rows attribute determines the number of horizontal frames to create ¨ The cols attribute determines the number of vertical frames to create n The src attribute of the <frame> element specifies the document to be opened in an individual frame
HTML Frames <frameset rows=“*, 50%" cols="50%, *"> <frame src="" name="topleft"> <frame src="" name="topright"> <frame src="" name="botleft"> <frame src="" name="botright"> </frameset> Top left Top right Bottom left Bottom right
Nesting Frames n Each individual frame within a window can contain its own set of frames. n Frames that are contained within other frames are called nested frames. n Nested frames accomplished by including a <frameset> element inside another <frameset> element.
Nested Frames <frameset rows="50%, 50%" cols="50%, 50%" border="5" > <frame src="" name="topleft" bordercolor="red" scrolling="no“ /> <frameset rows="50%, 50%" cols="50%, 50%" border="5“ /> <frame src="" name="botleft" bordercolor="red" scrolling="no“ /> <frame src="" name="botright" bordercolor="red" scrolling="no“ /> </frameset> <frame src="" name="botleft" bordercolor="red" scrolling="no“ /> <frame src="" name="botright" bordercolor="red" scrolling="no“ /> </frameset>
Using the target Attribute & <base> Element n n One popular use of frames creates a table of contents frame on the left side of a Web browser window with a display frame on the right side. The target attribute determines in which frame or Web browser window a document opens. When you are using the same target window or frame for a long list of hyperlinks, it is easier to use the target attribute in the <base> element instead of repeating the target attribute within each hyperlink. You use the target attribute with the <base> element to specify a default target for all links in a document, using the assigned name of a window or frame.
Links Within Frames Jump to the <a href="analysis. htm" target="main">Analysis</a> of the project n The target can be a name of a frame that you specified in the <frame> tag or one of the following Values: ¨ "_blank“ Loads the link into a new blank window. ¨ "_parent“ Loads the link into the immediate parent of the document the link is in. ¨ "_self“ Loads the link into the same window. (default) ¨ "_top“ Loads the link into the full body of the current window.
Frames Disadvantage n The web developer must keep track of more HTML documents. n It is difficult to print the entire page. n Frames are less used in modern-day web design, they’re still valid, and there are still many web sites that use these elements today as they have for years.
Tables
Table
Table Tags Tag Description <table> Defines a table. <caption> Defines a table caption. Provides a means for labeling the table’s content. Used once per table and must immediately follow the table start tag. <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <thead> Groups the header content in a table. By default, a thead will not affect the display of the table in any way. <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table
Using of <table>, <tr> & <td> Tags Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table structure. n Each row of the table is indicated using a two-sided <tr> (for table row). n Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells. n
Columns Within a Table HTML does not provide a tag for table columns. n In the original HTML specifications, the number of columns is determined by how many cells are inserted within each row. n ¨ i. e. if a table have four <td> tags in each row, then it has four columns.
The Table Syntax <table> <tr> <td> First Cell </td> <td> Second Cell </td> n </tr> <td> Third Cell </td> <td> Fourth Cell </td> </tr> </table> two rows two columns This creates a table with two rows and two columns.
Adding Headings to Table <table border="2" bordercolorlight="#b 2 b 2 ff"> <tr bordercolor="red"> <th>First Col</th> <th>second Col</th> </tr> <td> First Cell </td> <td> Second Cell </td> </tr> <td> Third Cell </td> <td> Fourth Cell </td> </tr> </table>
Adding <caption> to Table <table border="2" bordercolorlight=“yellow” cellpadding=10 > <caption>Demonstrating Table with header & caption</caption> <tr bordercolor="red"> <th>First Col</th> <th>second Col</th> </tr> <td> First Cell </td> <td> Second Cell </td> </tr> <td> Third Cell </td> <td> Fourth Cell </td> </tr> </table>
The <table> Tag Attributes Attribute Description Bgcolor like with the body tag, this sets the background color of any item. It works with tables as well and will be seen as the default color. Width determines the width of the table and isn’t required. If you don’t put this in, the table will automatically adjust in terms of width. Height it’s mainly for the height and how high you want the table to be. Not required at all and will adjust on its own if not with a set height. Border determines the borders from outside the table to the table cells and isn’t required. By default, browsers display tables without table borders, i. e. its default value is 0. Cellpadding it’s the distance of the cell wall from the contents. Cellspacing sets the distance between cells and isn’t required. Again, it will do that automatically if not set. bordercolor to set the color of the border.
The <tr> Tag Attributes Attribute Value Description align Left Right Center justify Aligns the content in a cell bgcolor rgb(x, x, x) #xxxxxx colorname Specifies a background color for a cell. valign Top Middle Bottom baseline Vertical aligns the content in a cell
The <th>& <td> Tags Attribute Value Description align left |right | center | justify Aligns the content in a cell bgcolor rgb(x, x, x) #xxxxxx colorname Specifies a background color for a cell. colspan Number Sets the number of columns a cell should span height pixels | % Sets the height of a cell rowspan Number Sets the number of rows a cell should span valign top | middle | bottom |baseline Vertical aligns the content in a cell width pixels | % Specifies the width of a cell
Defining Cell and Column Sizes n To set the width of an individual cell, add the width attribute to either the <td> or <th> tags. n The syntax is: width=“value” value can be expressed either in pixels or as a percentage of the table width ¨ a width value of 30% displays a cell that is 30% of the total width of the table ¨ n The height attribute can be used in the <td> or <th> tags to set the height of individual cells.
Spanning Rows and Columns n n To merge several cells into one, you need to create a spanning cell. A spanning cell is a cell that occupies more than one row or column in a table. Spanning cells are created by inserting the rowspan and colspan attribute in a <td> or <th> tag. The syntax for these attributes is: rowspan=“value” colspan=“value” ¨ value is the number of rows or columns that the cell spans in the table
Example of Spanning Cells this cell spans two columns This cell spans three rows
Designing a Page Layout with Tables n HTML tables are most often used to define the layout of an entire Web page. n If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, you’ll find tables an essential and useful tool. n Remember that some monitors display Web pages at a resolution of 640 by 480 pixels.
Web Page Layout using Table
A Sample Web Page Design with Tables
Web Page Using Nested Table n Tables can be created within another table making the Web page easier to manage.
Changing The Table Text Size n In order to change the size of the table text, you need to insert a <font> tag into each cell. ¨ Note: The <font> tag can not be applied to all of the text in a table. n As <font> tag is deprecated <style> tag is used instead.
Online References www. w 3 schools. com n www. echo. com n www. quackit. com n www. htmlcodetutorial. com n www. htmlquick. com n www. blooberry. com n… n
Now Its Time To Do Your Web Right Now
- Slides: 81
