Lecture-3: Introduction to html - Basic Structure & Block Building
5 likes2,556 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