HTML Introduction 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 markup system called it General Markup Language (GML). In 1986, International Standard Organization (ISO) took up t hi s c o nc e pt and st and ard i ze d i t as St and ard 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 f il e is a text f il e containing small markup tags The markup tags tell the Web browser how to display the page An HTML f il e must have an htm or html f il e extension An HTML f ile can be created using a simple text editor (notepad) 3 Web Technology The Anatomy of a Web Site: URLs – Uniform Resourc e Loc ator : A web address. Ex. www.nirmauni.ac.in Web S erv ers: A c om p uter, running sp ec ial 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 f il e with a single f il e name Home pages: ﬁrst 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 > T he sur ro und ing c harac t e r s are c alle d ang le brackets HTML tags normally come in pairs like and exceptions: , , tags … The f irst tag in a pair is the start tag, the second tag is the end tag The text between the star t and end tags is the element content HTML tags are not case sensitive, means the 7 same as How to Create and View an HTML document? 1.Use an text editor such as Notepad to write the document. 2.Save the f il e as f il ename.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 ﬁlename.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 deﬁne 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 Closing Description Tag Tag To put a comment in a HTML document. It will not display in the output. Frames the entire HTML page. Frames the identif ication information for the page, such as the title, that is transferred to the browser Fra m e s t he cont e nt of t he pa ge t o 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 Deﬁned with the to tags deﬁnes the largest heading deﬁnes 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 Deﬁned 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 deﬁnes a horizontal rule: This is a paragraph 15 Web Technology Single Space The   is used when you want to insert a space between words. The hr tag deﬁnes a horizontal rule: Example:3 16 Web Technology Tags Summary Tag Description to Deﬁnes header 1 to header to 6 Deﬁnes a paragraph Inserts a single line break Deﬁnes a horizontal rule To put a space between   words Deﬁnes 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 speciﬁed in the start of an HTML element Example:4 Example:5 19 HTML Text Formatting Text Formatting Tags Tag Description Deﬁnes bold text Deﬁnes big text Deﬁnes emphasized text Deﬁnes italic text Deﬁnes small text Deﬁnes strong text Deﬁnes subscripted text Deﬁnes superscripted text Deﬁnes inserted text Deﬁnes deleted text 21 Web Technology Computer Output Tags Tag Description Deﬁnes computer code text Deﬁnes keyboard text Deﬁnes sample computer code Deﬁnes teletype text Deﬁnes a variable Deﬁnes preformatted text 22 Web Technology Citations, Quotations, and Deﬁnition Tags Tag Description Deﬁnes an abbreviation Deﬁnes an acronym Deﬁnes an address element Deﬁnes the text direction Deﬁnes a long quotation Deﬁnes a short quotation 23 Web Technology Web Technology HTML Text Formatting HTML deﬁnes 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 AttributesExample Attribute Purpose size="number" size="2" Deﬁnes the font size size="+number" size="+1" Increases the font size size="-number" size="-1" Decreases the font size face="face-name" face="Times" Deﬁnes the font-name color="color-value" color="#eeff00" Deﬁnes the font color color="color-name" color="red" Deﬁnes 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 > > & ampersand & & " quotation mark " " ' (does not work in ' apostrophe ' IE) Example:19 31 Web Technology Some Other Commonly Used Character Entities Resul Description Entity Name Entity Number t ¢ Cent ¢ ¢ £ Pound £ £ ¥ Yen ¥ ¥ € Euro € € § Section § § © copyright © © registered ® ® ® trademark × multiplication × × ÷ division ÷ ÷ 32 HTML Lists Web Technology Types of List Unordered List Ordered Lists Deﬁnition 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 Deﬁnition Lists A def inition list is not a list of items. This is a list of terms and explanation of the terms. A deﬁnition list starts with the tag. Each deﬁnition-list term starts with the tag. Each deﬁnition-list deﬁnition starts with the tag. 39 Web Technology Deﬁnition 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 Deﬁnition Lists Inside a deﬁnition-list deﬁnition (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 Deﬁnes an ordered list Deﬁnes an unordered list Deﬁnes a list item Deﬁnes a deﬁnition list Deﬁnes a deﬁnition term Deﬁnes a deﬁnition 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 speciﬁes 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 speciﬁes 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 ﬁlls the entire browser window. 47 Web Technology Background (cont…) The URL can be relative (as in the ﬁrst 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 def ined 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) rgb(192,192,19 #C0C0C0 2) 51 rgb(255,255,25 #FFFFFF 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 ﬁle, 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 deﬁnes a link to Nirma University: Visit Nirma University! 57 Web Technology The Target Attribute With the target attribute, you can deﬁne where the linked document will be opened. The line below will open the document in a new browser window: Visit 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 speciﬁc section on a page, instead of letting the user scroll around to ﬁnd 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 The Anchor Tag and the Name Web Technology Attribute (cont…) The line below deﬁnes 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 ﬁle "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 deﬁned 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 deﬁning 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" h a s t h e U R L : h t t p : //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 f ir st paragraph, then the image, and then the second paragraph. 64 Web Technology The Alt Attribute The alt attribute is used to def ine an "alternate text" for an image. The value of the alt attribute is an author-deﬁned text: - The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load im ag es. T he b rowser will then disp lay 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 ﬂoat 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 Deﬁnes an image Deﬁnes an image map Deﬁnes a clickable area inside an image map 69 HTML Tables Web Technology HTML Tables With HTML you can create tables. Tables are deﬁned 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, im ages, 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 deﬁned 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 ( ) 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 deﬁnes 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 deﬁnes 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 79 Tableexample3 , , 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 deﬁnes a column group. Two ways: A single deﬁnition 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 Deﬁnes a table Deﬁnes a table header Deﬁnes a table row Deﬁnes a table cell Deﬁnes a table caption Deﬁnes groups of table columns Deﬁnes the attribute values for one or more columns in a table Deﬁnes a table head Deﬁnes a table body Deﬁnes 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 diﬃcult to print the entire page 87 Web Technology The Frameset Tag The tag def ines how to divide the window into frames Each frameset deﬁnes 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 def ines what HTML document to put into each frame In the example below we have a frameset with two columns. The f irst 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 speciﬁed section within a frame Example:75 Jump to a speciﬁed 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 Deﬁnes a set of frames Deﬁnes a sub window (a frame) Deﬁnes a noframe section for browsers that do not handle frames Deﬁnes 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 f ie lds, textarea f ie l d s , d ro p - d o w n m e n u s , ra d i o b u t t o n s , checkboxes, etc.) in a form. A form is deﬁned with the tag. 100 Web Technology Input The most used form tag is the tag. The type of input is speciﬁed with the type attribute. The most commonly used input types are explained below. 101 Web Technology Text Fields Text ﬁelds 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 ﬁeld 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 ﬁle. The form's action attribute deﬁnes the name of the ﬁle to send the content to. The ﬁle deﬁned 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: S u b m it 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- Default. All characters are encoded before sent urlencoded (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 ﬁle 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 - Deﬁne keywords for search engines: Example 2 - Deﬁne a description of your web page: Example 3 - Deﬁne the author of a page: Example 4 - Refresh document every 30 seconds:

HTML Introduction PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue