Introduction to HTML PDF

Introduction to HTML  Web Technology A Brief History IBM wanted to set a documentation system in which we can mark the title, headings, paragraphs and font type selections in the 1980s. They came out with a set of mar...

Introduction to HTML  Web Technology A Brief History IBM wanted to set a documentation system in which we can mark the title, headings, paragraphs and font type selections in the 1980s. They came out with a set of markup system called it General Markup Language (GML). In 1986, International Standard Organization (ISO) took up this concept and standardized it as Standard Generalized Markup Language (SGML). In 1989 Tim Berners Lee and his team designed the present form of the documentation language and called it Hyper Text Markup Language (HTML). 2  Web Technology What is HTML? HTML stands for Hyper Text Markup Language Basic tool for designing a web page. Documentation language to mark the headings, title, table and forms. An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor (notepad) 3  Web Technology The Anatomy of a Web Site: URLs – Uniform Resource Locator : A web address. Ex. www.nirmauni.ac.in Web Servers: A computer, running special software, which always connected to the Internet. A system on the internet containing one or more web site. Pages: ex. www.nirmauni.ac.in/index.html Web Browsers: Is a piece of software that runs on your PC and enables you to view web pages. Ex. Microsoft Internet Explorer, Mozilla based browsers, Netscape Navigator, etc…. 4  Web Technology The Anatomy of a Web Site: Web site: a collection of one or more web pages Web pages: single disk file with a single file name Home pages: first page in website Think about the followings before working your Web pages. Think about the sort of information(content) you want to put on the Web. Set the goals for the Web site. Organize your content into main topics. Come up with a general structure for pages and topics. 5 HTML Tags and Basic Page Structure  Web Technology HTML Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like and exceptions: , , tags … The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, means the same as 7  How to Create and View an HTML document? 1.Use an text editor such as Notepad to write the document. 2.Save the file as filename.html on a PC. This is called the Document Source. 3.Open Internet Explorer (or any browser) Off-Line. 4.Click on File, Open File and select the filename.html document that you just created. 5.Your HTML page should now appear just like any other Web page in explorer.  How to Create and View an HTML document? 7.You may now switch back and forth between the Source and the HTML Document switch to Notepad with the Document Source make changes save the document again switch back to explorer. click on REFRESH and view the new HTML Document switch to Notepad with the Document Source......  Web Technology HTML Elements Example:1 This HTML element starts with the start tag , and ends with the end tag. The purpose of the tag is to define the HTML element that contains the body of the HTML document. Example:2 This is an HTML element: This text is bold 10  Web Technology Tags Summary Opening Tag Closing Tag Description To put a comment in a HTML document. It will not display in the output. Frames the entire HTML page. Frames the identification information for the page, such as the title, that is transferred to the browser Frames the content of the page to be displayed in the browser window Gives the name of the page that will appear at the top of the browser window. Is contained within and 11  Web Technology Headings Defined with the to tags defines the largest heading defines the smallest heading This is a heading This is a heading This is a heading This is a heading This is a heading This is a heading 12  Web Technology Paragraphs Defined with the tag This is a paragraph This is another paragraph Note: Paragraphs can be written without end tags This is a paragraph This is another paragraph 13  Web Technology Line Breaks tag is used when you want to break a line, but don't want to start a new paragraph This is a paragraph with line breaks The tag is an empty tag. It has no end tag tag written like this: Because the tag has no end tag 14  Web Technology Horizontal Rule The tag is used to insert a horizontal rule (line) The hr tag defines a horizontal rule: This is a paragraph 15  Web Technology Single Space The &nbsp; is used when you want to insert a space between words. The&nbsp;hr tag defines a horizontal rule: Example:3 16  Web Technology Tags Summary Tag Description to Defines header 1 to header 6 to Defines a paragraph Inserts a single line break Defines a horizontal rule &nbsp; To put a space between words Defines a comment 17 HTML Attributes  Web Technology HTML Tag Attribute Provides additional information to an HTML element Attributes always come in name/value pairs like this: name="value". Attributes are always specified in the start of an HTML element Example:4 Example:5 19 HTML Text Formatting  Text Formatting Tags Tag Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text 21 Web Technology  Computer Output Tags Tag Description Defines computer code text Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text 22 Web Technology Citations, Quotations, and Definition Tags Tag Description Defines an abbreviation Defines an acronym Defines an address element Defines the text direction Defines a long quotation Defines a short quotation 23 Web Technology  Web Technology HTML Text Formatting HTML defines a lot of elements for formatting output, like bold or italic text. Example:6 Preformatted Text Example:7 Computer Output Tags Example:8 Address Example:9 24  Web Technology HTML Text Formatting Abbreviations and Acronyms Example:10 Text Direction Example:11 Quotation Example:12 Deleted and Inserted Text Example:13 25 HTML Fonts  Web Technology The HTML Tag You can specify both the size and the type of fonts Example:14 Font Attributes Attribute Example Purpose size="number" size="2" Defines the font size size="+number" size="+1" Increases the font size size="-number" size="-1" Decreases the font size face="face-name" face="Times" Defines the font-name color="color-value" color="#eeff00" Defines the font color color="color-name" color="red" Defines the font color 27  Web Technology Font Style and Font Size Example:15 Example:16 Font Colors Example:17 Example:18 28 HTML Character Entities  Web Technology Character Entities Characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. To display a less than sign ( greater than &gt; &#62; & ampersand &amp; &#38; " quotation mark &quot; &#34; ' apostrophe &apos; (does not work in IE) &#39; Example:19 31  Web Technology Some Other Commonly Used Character Entities Result Description Entity Name Entity Number ¢ Cent &cent; &#162; £ Pound &pound; &#163; ¥ Yen &yen; &#165; € Euro &euro; &#8364; § Section &sect; &#167; © copyright &copy; &#169; ® registered trademark &reg; &#174; × multiplication &times; &#215; ÷ division &divide; &#247; 32 HTML Lists  Web Technology Types of List Unordered List Ordered Lists Definition lists 34  Web Technology Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the tag. Each list item starts with the tag. Coffee Milk 35  Web Technology Unordered Lists Here is how it looks in a browser: Coffee Milk Example:27 36  Web Technology Ordered Lists An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the tag. Each list item starts with the tag. Coffee Milk Here is how it looks in a browser: 1. Coffee 2. Milk 37  Web Technology Ordered Lists Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. Example:28 38  Web Technology Definition Lists A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the tag. Each definition-list term starts with the tag. Each definition-list definition starts with the tag. 39  Web Technology Definition Lists Coffee Black hot drink Milk White cold drink Here is how it looks in a browser: Coffee Black hot drink Milk White cold drink 40  Web Technology Definition Lists Inside a definition-list definition (the tag) you can put paragraphs, line breaks, images, links, other lists, etc. Example:29 Example:30 Example:31 Example:32 41  Web Technology List Tags Tag Description Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines a definition term Defines a definition description 42 HTML Background  Web Technology Background and Text Color A good background can make a Web site look really great. Example:43 Example:44 44  Web Technology Backgrounds The tag has two attributes where you can specify backgrounds. The background can be a color or an image. 45  Web Technology Bgcolor The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name: The lines above all set the background-color to black. 46  Web Technology Background The background attribute specifies a background- image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window. 47  Web Technology Background (cont…) The URL can be relative (as in the first line above) or absolute (as in the second line above). Example:45 Example:46 Example:47 48 HTML Colors  Web Technology Color Values Colors are displayed combining RED, GREEN, and BLUE light sources. HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF). 50  Web Technology Color Values (cont…) The table below shows the result of combining Red, Green, and Blue light sources. Color Color HEX Color RGB #000000 rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) 51 #FFFFFF rgb(255,255,255)  Web Technology Color Names The table below provides a list of the color names that are supported by all major browsers. Color Names 52  Web Technology Color Values The table below provides a list of the color values that are supported by all major browsers. Color Values 53 HTML Links  Web Technology Hyperlinks HTML uses a hyperlink to link to another document on the Web. It is used to create links in an HTML document. Example:20 Images as a link Example:21 55  Web Technology The Anchor Tag and the Href Attribute HTML uses the (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor: Text to be displayed 56  Web Technology The Anchor Tag and the Href Attribute (cont…) The tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. This anchor defines a link to Nirma University: Visit Nirma University! 57  Web Technology The Target Attribute With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: Vi sit Nirma University! 58  Web Technology The Anchor Tag and the Name Attribute The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Below is the syntax of a named anchor: Text to be displayed The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. 59  Web Technology The Anchor Tag and the Name Attribute (cont…) The line below defines a named anchor: Useful Tips Section You should notice that a named anchor is not displayed in a special way. To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this: Jump to the Useful Tips Section A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this: Jump to the Useful Tips Section 60  Web Technology Open a link in a new browser window Example:22 Link to a location on the same page Example:23 Break out of a frame Example:24 Create a mailto link Example:25 Example:26 61 HTML Images  Web Technology The Image Tag and the Src Attribute With HTML you can display images in a document. In HTML, images are defined with the tag. The tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. 63  Web Technology The Image Tag and the Src Attribute The syntax of defining an image: The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. 64  Web Technology The Alt Attribute The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: - The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers. 65  Web Technology Example:33 Insert Images from different locations Example:34 66  Web Technology Background Image Example:35 Aligning images Example:36 Let the image float Example:37 Adjust images to different sizes Example:38 Display an alternate text for an image Example:39 67  Web Technology Make a hyperlink of an image Example:40 Create an image map Example:41 Turn an image into an image map Example:42 68  Web Technology Image Tags Tag Description Defines an image Defines an image map Defines a clickable area inside an image map 69 HTML Tables  Web Technology HTML Tables With HTML you can create tables. Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. Example:48 71  Web Technology Tables and Border Attributes If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, you will have to use the border attribute. Example:49 bordercolor attribute 72  Web Technology Headings in a Table Headings in a table are defined with the tag Example:50 73  Web Technology Empty Cells in Table Table cells with no content are not displayed very well in most browsers. Example:51 Note that the borders around the empty table cell are missing To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible Example:52 Example:53 Example:54 74  Web Technology More Examples… Table with no borders Example:55 Headings in Table Example:56 Empty Cells Example:57 Table with a caption Example:58 75  Web Technology More Examples… Table cells that span more than one row/column Example:59 Tags inside a table Example:60 Cell padding Example:61 Cell spacing Example:62 76  Web Technology More Examples… Add a background color or a background image to a table Example:63 Add a background color or a background image to a table cell Example:64 Align the content in a table cell Example:65 The frame attribute Example:66 The frame and border attributes Example:67 77  Web Technology , , tag It defines a set of table header rows. It may appear only once per table and is placed at the beginning, just after the tag. It give the opportunity, the browser replicates these heading rows when the table is printed or displayed in multiple sections. It defines a footer for a table. It may appear only once per table, just before the tag. It give the opportunity, the browser replicates footer when the table is printed or displayed in multiple sections. 78  Web Technology , , tag It divide your table into discrete sections. It collects one or more rows into a group within a table. It is perfectly acceptable to have no tags within a table, although where you might include one, you probably will have two or more tags within a table. You may not span from one into another. Examples: Tableexample1 Tableexample2 Tableexample3 Tableexample4 79  , , tag Sum $180 Month Savings January $100  Web Technology id attribute: Contains a string value to uniquely label a tag for later reference by a hyperlink or an applet. title attribute: Contains a string value to optionally title the table. nowrap attribute Stops normal word wrapping in all cells in that row. 81  Web Technology tag It defines a column group. Two ways: A single definition of several identical columns A container for several dissimilar columns span attribute 82  Web Technology tag span attribute ISBN Title Price 83  Web Technology tag 84  Web Technology Summary of Table Tags Tag Description Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines groups of table columns Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer 85 HTML Frames  Web Technology Frames With frames, you can display more than one Web page in the same browser window. With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: The web developer must keep track of more HTML documents It is difficult to print the entire page 87  Web Technology The Frameset Tag The tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will occupy 88  Web Technology The Frame Tag The tag defines what HTML document to put into each frame In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. 89  Web Technology The Frame Tag Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*"). 90  Web Technology Frameset Vertical Frameset Example:68 Horizontal Frameset Example:69 91  Web Technology How to use the tag Example:70 92  Web Technology Mixed frameset Example:71 93  Web Technology Frameset with noresize="noresize" Example:72 94  Web Technology Navigation frame This example demonstrates how to make a navigation frame. The navigation frame contains a list of links with the second frame as the target. Example:73 95  Web Technology Inline Frame Example:74 Jump to a specified section within a frame Example:75 Jump to a specified section with frame navigation Example:76 96  default target It sets the default target for every hyperlink in the current document that does not contain an explicit target attribute.  Web Technology Frame Tags Tag Description Defines a set of frames Defines a sub window (a frame) Defines a noframe section for browsers that do not handle frames Defines an inline frame 98 HTML Forms  Web Technology Form Form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the tag. 100  Web Technology Input The most used form tag is the tag. The type of input is specified with the type attribute. The most commonly used input types are explained below. 101  Web Technology Text Fields Text fields are used when you want the user to type letters, numbers, etc. in a form. First name: Last name: 102  Web Technology Text Fields How it looks in a browser: First name: Last name: Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default. 103  Web Technology Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices. Female 104  Web Technology Radio Buttons How it looks in a browser: Male Female Note that only one option can be chosen. 105  Web Technology Check Boxes Checkboxes are used when you want the user to select one or more options of a limited number of choices. I have a bike: I have a car: I have an airplane: 106  Web Technology Check Boxes I have a bike: I have a car: I have an airplane: 107  Web Technology Check Boxes How it looks in a browser: I have a bike: I have a car: I have an airplane: 108  Web Technology Form’s Action Attribute and Submit Button When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input. 109  Web Technology Form’s Action Attribute and Submit Button Username: How it looks in a browser: Username: Submit 110  Web Technology More Examples Checkboxes Example:77 Radio Buttons Example:78 Simple Drop Down Box Example:79 Example:80 Text Area Example:81 111  Web Technology More Examples Create Button Example:82 Input Fields and Submit button Example:83 Form with Checkbox Example:84 Form with Radio Buttons Example:85 Send E-Mail from a form Example:86 112  The enctype attribute Value Description application/x-www-form-urlencoded Default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values) multipart/form-data No characters are encoded. This value is required when you are using forms that have a file upload control text/plain Spaces are converted to "+" symbols, but no special characters are encoded  The accept-charset attribute It lets you specify a list of character sets that the server support to properly interpret the form data. Common values: UTF-8 - Character encoding for Unicode ISO-8859-1 - Character encoding for the Latin alphabet  lang, dir and event attributes lang → two-character language abbreviations Ex: lang=en-UK Dir→ dir=ltr dir=rtl Event Two special event related attribute: onSubmit and onReset onSubmit: - Ex: client side validation onReset – executes when reset button is pressed  meta tag Describe metadata within an HTML document: Example 1 - Define keywords for search engines: Example 2 - Define a description of your web page: Example 3 - Define the author of a page: Example 4 - Refresh document every 30 seconds: