HTML Basics.pdf
- 1. 1 1 Internet • The Internet is a massive network of networks, a networking infrastructure. • It connects millions of computers together globally. • Forming a network in which any computer can communicate with any other computer. • Information that travels over the Internet through protocols. Web Design and Animation
- 2. 2 World Wide Web • A system of internet servers that support specially formatted documents. The documents are formatted in a markup language called HTML that supports links to other documents, as well as graphics, audio, and video files. • Web Browser like “Netscape Navigator” and “Microsoft's Internet Explorer” make it easy to access the World Wide Web. Difference Internet Network of networks, in which millions of computers are connects together globally, forming a network in which any computer can communicate with other computer. WWW WWW is a way of accessing information over the medium of the Internet. The Web uses the HTTP protocol.
- 3. 3 Markup Language • A markup language gives extra information about a piece of text. For example B means bold in the HTML language. B is a markup tag. History of Markup Language The term markup is derived from the traditional publishing practice of marking up a manuscript, that is, adding symbolic printer's instructions in the margins of a paper manuscript.
- 4. 4 GenCode 1967 The idea of markup languages was apparently first presented by publishing executive William W. Tunnicliffe at a conference in 1967, although he preferred to call it generic coding. Tunnicliffe would later lead the development of a standard called GenCode for the publishing industry. TeX 1970s and 80s Another major publishing standard is “TeX”, created and continuously refined by Donald Knuth. • TeX concentrated on detailed layout of text and font descriptions. • This required Knuth to spend considerable time investigating the art of “Typesetting”. • TeX requires considerable skill from the user. • A TeX macro package known as “LaTeX”.
- 5. 5 Scribe 1980 The first language to make a clear and clean distinction between structure and presentation, developed by Brian Reid. • It introduced the idea of styles separated from the marked up document . • Scribe influenced the development of Generalized Markup Language (later SGML). SGML (Standard Generalized Markup Language) 1986 A metalanguage in which one can define markup languages for documents. SGML itself does not specify any particular formatting, but it specifies the rules for tagging elements. SGML was originally designed to enable the sharing of machine-readable documents in large projects in government, legal and industry. It has also been used extensively in the printing and publishing industries. HTML, which is one way of defining and interpreting tags according to SGML rule. Because it is a large and complex system, it is not yet widely used on personal computers.
- 6. 6 HTML (Hyper Text Markup Language) 1991 HTML was originally designed based on SGML tagging but without SGML's emphasis on rigorous marku XML (Extensible Markup Language) XML is a simplified rework of SGML, which is designed so to make the XML parser much easier to implement, compared to an SGML parser. XML is used for general-purpose applications, such as the XHTML, SOAP and etc.
- 7. 7 What is an HTML File? HTML stands for Hyper Text Markup Language 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 An HTML tags are case-insensitive Note: If you want to follow the latest web standards, you should always use lowercase tags. Example: html head titleTitle of page/title /head body This is my first homepage. bThis text is bold/b /body /html
- 8. 8 Example Explanation The first tag in your HTML document is html. This tag tells your browser that this is the start of an HTML document. The last tag in your document is /html. This tag tells your browser that this is the end of the HTML document. The text between the head tag and the /head tag is header information. Header information is not displayed in the browser window. The text between the title tags is the title of your document. The title is displayed in your browser's caption. The text between the body tags is the text that will be displayed in your browser. The text between the b and /b tags will be displayed in a bold font. Tags Attributes Tags can have attributes. Attributes provide additional information to an HTML element. e.g. table border=0 Attributes always come in name/value pairs like this: name=value. Attributes are always specified in the start tag of an HTML element. Attributes and attribute values are also case-insensitive. Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes: name='John ShotGun Nelson'
- 9. 9 Headings Headings are defined with the h1 to h6 tags. h1 defines the largest heading. h6 defines the smallest heading. h1This is a heading/h1 h2This is a heading/h2 h3This is a heading/h3 h4This is a heading/h4 h5This is a heading/h5 h6This is a heading/h6 HTML automatically adds an extra blank line before and after a heading. Paragraphs Paragraphs are defined with the p tag. pThis is a paragraph/p pThis is another paragraph/p HTML automatically adds an extra blank line before and after a paragraph.
- 10. 10 Line Breaks The br tag is used when you want to end a line, but don't want to start a new paragraph. pI br Love brPakistan/p Note: The br tag is an empty tag. It has no closing tag. Comments in HTML The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. !-- This is a comment --
- 11. 11 HTML Backgrounds The body tag has two attributes where you can specify backgrounds. The background can be a color or an image. 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: body bgcolor=#000000 body bgcolor=rgb(0,0,0) body bgcolor=black Background The background attribute specifies a background-image for an HTML page. body background=clouds.gif Linking to Another Web-Page Anchor Tag and href attribute The a tag is used to create an anchor to link from and 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. a href=urlText to be displayed/a Example: a href=http://www.gmail.com/Visit G-Mail/a
- 12. 12 Linking to Another Web-Page Anchor Tag and 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: a href=http://www.google.com/ target=_blank Visit Google /a Linking Within Documents Anchor Tag and 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.
- 13. 13 Linking B/W Your Own Page If you want to create a link from one page to another page on the same computer. a href=“text.htmlText File is Here./a You can also use an image as a link: a href=lastpage.htm img border=0 src=buttonnext.gif width=65“/a E-Mail Link on Your Page You can add your E-Mail address on your web-page, so that your reader can reply/feed-back while visiting your page. This is the simply way to enable readers of your web-pages to “talk back” to you. a href=“mailto:[email protected]” Send me an E-Mail /a
- 14. 14 Text Alignment The align attribute allows you to left-justify, right-justify or center text. p align=“left” I love Pakistan.br / I love Pakistan.br / I love Pakistan.br / /p HTML Lists Unordered Lists An unordered list starts with the ul tag. Each list item starts with the li tag. ul liCoffee/li liMilk/li /ul Output: • Coffee • Milk
- 15. 15 HTML Lists Ordered Lists An ordered list starts with the ol tag. Each list item starts with the li tag. ol liCoffee/li liMilk/li /ol Output: 1. Coffee 2. Milk HTML Lists Definition Lists Definition lists are indented lists without any number or symbol in front of each item. dl dtCoffee/dt ddBlack hot drink/dd dtMilk/dt ddWhite cold drink/dd /dl Output: Coffee Black hot drink Milk White cold drink
- 16. 16 Text Formatting bThis text is bold/b strong This text is strong /strong big This text is big /big emThis text is emphasized/em iThis text is italic/i smallThis text is small/small This text contains subsubscript /sub This text contains sup superscript /sup Font Size and Color The big, small and etc. gives you some rudimentary control over the size and appearance of the text on your page. For more control and size on the appearance of your text you can use font in HTML. font size=“5” face= “arial” color=“purple” This text will be big and purple /font
- 17. 17 HTML Character Entities Some characters have a special meaning in HTML. If we want the browser to actually display these characters we must insert character entities in the HTML source. A character entity has three parts: 1. an ampersand () 2. an entity name 3. # and an entity number, and finally a semicolon(;). To display in an HTML document we write: lt; or #60; Name instead of a number is easier to remember. Not all browsers support the newest entity names. Note: that the entities are case sensitive. Most Common Character Entities
- 18. 18 Commonly Used Character Entities Tables Tables are defined with the table tag. A table is divided into rows (with the tr tag), and each row is divided into data cells (with the td 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.
- 19. 19 Example table border=1 tr tdrow 1, cell 1/td tdrow 1, cell 2/td /tr tr tdrow 2, cell 1/td tdrow 2, cell 2/td /tr /table Tables and the Border Attribute 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. table border=“0 table border=1
- 20. 20 Headings in a Table Headings in a table are defined with the th tag. table border=1 tr thHeading/th thAnother Heading/th /tr tr tdrow 1, cell 1/td tdrow 1, cell 2/td /tr /table Spans two columns table border=1 tr thName/th th colspan=2Telephone/th /tr tr tdBill Gates/td td555 77 854/td td555 77 855/td /tr /table
- 21. 21 Spans two Rows table border=1 tr thFirst Name:/th tdBill Gates/td /tr tr th rowspan=2Telephone:/th td555 77 854/td /tr tr td555 77 855/td /tr /table Other attributes of Table table border=1 bgcolor=red table border=1 background=“clouds.jpg td bgcolor=redFirst/td td background=“clouds.jpgFirst/td td align=left
- 22. 22 Forms A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. form --------- --------- /form Input --- Text Fields The most used form tag is the input tag. The type of input is specified with the type attribute. Text fields are used when you want the user to type letters, numbers, etc. in a form. form First name: input type=text name=firstname br Last name: input type=text name=lastname /form
- 23. 23 Input --- Hidden Fields The most used form tag is the input tag. The type of input is specified with the type attribute. Text fields are used when you want the user to type letters, numbers, etc. in a form. form First name: input type=“hidden name=firstname /form Radio Button Radio Buttons are used when you want the user to select one of a limited number of choices. form input type=radio name=sex value=male Male br input type=radio name=sex value=female Female /form
- 24. 24 Checkboxes Checkboxes are used when you want the user to select one or more options of a limited number of choices. form I have a bike: input type=checkbox name=vehicle value=Bike /br I have a car: input type=checkbox name=vehicle value=Car /br I have an airplane:input type=checkbox name=vehicle value=Airplane /form Drop Down Box select name=country option value=pakistanPakistan/option option value=indiaIndia/option /select
- 25. 25 Text Area textarea rows=10 cols=30 The cat was playing in the garden. /textarea File Upload input type=file name=uploadedfile
- 26. 26 Button form input type=“submit value=Submit! /form