Lecture-3: Introduction to html - Basic Structure & Block Building
5 likes2,552 views
The document introduces HTML and discusses its basic structure and tags. It describes HTML as a markup language that defines the structure of webpages and allows for non-linear linking through hypertext. The document outlines HTML's history and development by the W3C. It explains the key parts of an HTML page including the <head> and <body> sections and common text formatting tags within the <body> like headings, paragraphs, and lists.
Lecture-3: Introduction to html - Basic Structure & Block Building
- 1. Introduction to HTML Mr. Mubashir Ali Lecturer (Dept. of Computer Science) [email protected] 1 Lecture 03
- 2. Outline ā¢ Introduction to HTML ā¢ Basic Structure of a HTML page ā¢ Text formatting tags in HTML ā¢ Lists in HTML 2 Mubashir Ali - Lecturer (Department of Computer Science)
- 3. ā¢ HTML ā Hyper-Text Markup Language ā The Language of Web Pages on the World Wide Web ā¢ It defines the structure of webpages and determines how data is displayed online ā¢ HTML is a text formatting language ā¢ Is a set of special instructions that can be added in the text to add formatting and linking information ā¢ Is directly interpreted by the browser 3 Mubashir Ali - Lecturer (Department of Computer Science) 1. Introduction to HTMLā¦
- 4. ā¢ Hypertext: ā Allows for non-linear linking to other documents ā¢ Markup Language: ā Content is āmarked upā or tagged to tell the browser how to display it ā¢ HTML standards are developed under the authority of the World Wide Web Consortium (W3C), headed by Tim Lee ā http://www.w3c.org 4 Mubashir Ali - Lecturer (Department of Computer Science) 1. Introduction to HTMLā¦
- 5. ā¢ HTML was created in 1991 by Tim Berners-Lee at CERN in Switzerland ā¢ It was designed to allow scientists to display and share their research ā¢ 1995- HTML 2 ā¢ lots of browsers had added their own bits to HTML ā¢ Dan Connolly and colleagues collected all the HTML tags that were widely used and collated them into a draft document 5 Mubashir Ali - Lecturer (Department of Computer Science) 1. Introduction to HTMLā¦
- 6. ā¢ 1997- HTML 3.2 ā¢ It was the first version developed and standardized exclusively by the W3C ā¢ HTML 3.2 included the support for applets, text flow around images, subscripts and superscripts etc ā¢ 1999 ā HTML 4.1 ā¢ extends HTML with mechanisms for style sheets, scripting, frames etc. ā¢ HTML5 6 Mubashir Ali - Lecturer (Department of Computer Science) 1. Introduction to HTMLā¦
- 7. ā¢ HTML Tags: ā¢ Tags are instruction that are directly embedded into the text of the document ā¢ Is a signal to a browser to do something before just throwing text on the screen ā¢ Begin with open angle bracket < and ends with close angle bracket > ā For example <HTML> ā¢ Paired Tags : <HTML> </HTML> ā¢ Singular Tags: <BR> 7 Mubashir Ali - Lecturer (Department of Computer Science) 1. Introduction to HTMLā¦
- 8. ā¢ HTML is not case-sensitive ā¢ multiple spaces will appear as a single space ā¢ Blank and new lines are ignored ā¢ <!-- comments -- > ā¢ HTML files have .html extension 8 Mubashir Ali - Lecturer (Department of Computer Science) 1. Introduction to HTMLā¦
- 9. ā¢ The entire web page is enclosed within <HTML> and </HTML> ā¢ Within these tags two distinct sections are created head and body ā¢ Head: <HEAD> <TITLE> ā¦ā¦ </TITLE> </HEAD> . Body: indicate the start and end of main body of textual information <BODY> </BODY> 9 Mubashir Ali - Lecturer (Department of Computer Science) 2. Structure of HTML Page
- 10. 10 Mubashir Ali - Lecturer (Department of Computer Science) 2. Structure of HTML Pageā¦ ā¢ First HTML page:
- 11. Attributes: ā¢ BGCOLOR: Change the background color ā¢ BACKGROUND: Place an image at background ā¢ TEXT: Change the color of the body text Example: ā¢ <BODY BGCOLOR=123345 TEXT=Red> ā¢ <BODY BACKGROUND=āimg.jpgā TEXT=Red> 11 Mubashir Ali - Lecturer (Department of Computer Science) 3. The BODY Tag
- 12. 12 Mubashir Ali - Lecturer (Department of Computer Science) 4. Formatting text
- 13. Formatting Textā¦... 13 Mubashir Ali - Lecturer (Department of Computer Science)
- 14. ā¢ <P>ā¦.. </p>: starts a new paragraph ā¢ Align (left, right, center and justify) ā¢ <BR>: gives an one line break ā¢ <H1> ā¦.. </H1>: heading ā¢ <HR>: draws horizontal line ā¢ ALIGN (LEFT,CENTER,RIGHT) ā¢ SIZE=2 ā¢ WIDTH=100% ā¢ color ā¢ Text Styles: ā¢ <B> ā¦. </B> , <I> ā¦. </I>, <U> ā¦. </U> 14 Mubashir Ali - Lecturer (Department of Computer Science) 4. Formatting textā¦
- 15. ā¢ <CENTER>ā¦.</CENTER> ā¢ <FONT>ā¦ā¦</FONT> ā FONTFACE: Sets the specified font name ā SIZE: Size of the text (between 1 and 7) ā COLOR: Set the color of the text ā¢ Example: ā <FONT FONTFACE=āCOMIC SANS MSā SIZE=6 COLOR=RED> Welcome</FONT> 15 Mubashir Ali - Lecturer (Department of Computer Science) 4. Formatting textā¦
- 16. ā¢ Un-ordered Lists: ā Starting Tag <UL>, Ending Tag </UL> ā List Items <LI> ā Type (FILLROUND, SQUARE) ā¢ Ordered Lists: ā Starting Tag <OL>, Ending Tag </OL> ā List Items <LI> ā Type (ā1ā, āAā, āāaā, āIā, āiā) ā Start (Alerts the numbering Sequence) ā Value (Changes the number sequence in the middle of an ordered list) 16 Mubashir Ali - Lecturer (Department of Computer Science) 5. Lists in HTML
- 17. ā¢ Definition Lists: ā Starting Tag<DL> ā Ending Tag </DL> ā Definition Term <DT> ā Definition Description <DD> 17 Mubashir Ali - Lecturer (Department of Computer Science) 5. Lists in HTMLā¦
- 18. ā¢ What is HTML? ā¢ Basic Structure of HTML page ā¢ Body tag attributes ā¢ Text formatting tags ā¢ Lists 18 Mubashir Ali - Lecturer (Department of Computer Science) Summary
- 19. ā¢ Chapter 1, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470- 54070-1. ā¢ http://www.w3schools.com/html 19 Mubashir Ali - Lecturer (Department of Computer Science) References