CS 283 Lecture 02: HTML (Fall 2024/2025) PDF

CS 283 Lecture 02: HTML (Fall 2024/2025) CS283 1 Hypertext Markup Language (HTML) Describes the content and structure of information on a web page HTML consists of a series of elements HTML elements tell the browser how...

CS 283 Lecture 02: HTML (Fall 2024/2025) CS283 1 Hypertext Markup Language (HTML) Describes the content and structure of information on a web page HTML consists of a series of elements HTML elements tell the browser how to display the content Surrounds text content with opening and closing tags TryIt Editor CS283 EXtensible HyperText Markup Language (XHTML) XML is a markup language where all files must be marked up properly (be "well-formed") Uses a markup format of XML XML-based version of HTML. XML + HTML = XHTML. Standardized in year 2000. XHTML is HTML defined as an XML application XHTML is supported by all major browsers. A strict XHTML page uses some different syntax and tags than HTML CS283 Web Standards Why use XHTML and web standards? more rigid and structured language more interoperable across different web browsers more likely that our pages will display correctly in the future Easier to maintain CS283  A Simple HTML Document The declaration defines that this document is an HTML5 document The element is the root element of an HTML page Page Title The element contains meta information about the HTML page The element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's My First Heading tab) My first paragraph. The element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The element defines a large heading The element defines a paragraph CS283 HTML Elements The HTML element consists of a start tag, a content and an end tag Syntax: Some Content Start tag Element content End tag Some Heading Some paragraph. none none Nested HTML Elements HTML elements can contain other HTM elements. All HTML documents consist of nested HTML elements. Tags must be correctly nested: a closing tag must match the most recently opened tag Heading paragraph. Flexible HTML ! HTML is Not Case Sensitive Some of the HTML elements might display properly even if the End Tag is missing. → this is not a recommended practice as the page might act unexpectedly! unclosed paragraph unclosed paragraph 2 Empty HTML Elements Empty elements are the HTML elements that has no content (like the element). Empty elements do not have an end tag Heading paragraph. This is a paragraph with a line break. HTML Attributes HTML elements can include attributes Attributes deliver further information about the HTML elements Attributes are defined in name/value pairs E.g.: name="value“ Attributes are determined in the start tag Our MSA HTML Style Tag Setting the style of an HTML element, can be done with the Style attribute This is a heading This is a paragraph. Defining the SRC attribute 1. Absolute URL:- Links to an external image that is hosted on another website src="http://www.msa.com/images/img_sample.jpg". 2. Relative URL - Links to an image that is hosted within the website. The URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. src="img_girl.jpg“ →it will be relative to the current page. src="/images/img_sample.jpg“ → relative to the domain. HTML Documents Structure HTML Documents Structure Page Heading Any paragraph. Page Title … HARRY POTTER AND THE DEATHLY HALLOWS - PART 2 … HTML Placed within the tag of the page Displayed in web browser’s title mark and when bookmarking the page CS283 Paragraph … Harry Potter and the Deathly Hallows, the last book in the series, begins directly after the events of the sixth book. Voldemort has completed his ascension to power and gains control of the Ministry of Magic … HTML Harry Potter and the Deathly Hallows, the last book in the series, begins directly after the events of the sixth book. Voldemort has completed his ascension to power and gains control of the Ministry of Magic output CS283 Placed within the of the page Headings , , … Harry Potter Books Harry Potter and the Philosopher’s Stone HTML Harry Potter Books Harry Potter and the Philosopher’s Stone output HTML headings are titles or subtitles that you want to display on a webpage. you can specify the size for any heading with the style attribute, using the CSS font-size property: CS283 Heading 1 Horizontal rule First paragraph Second Paragraph HTML First Paragraph Second Paragraph output Should be immediately closed with /> CS283 Links Search Google now! HTML Search Google now! output The href attribute specifies the destination URL Links or anchors are inline elements, so they must be placed inside a block element such as a p or h1 CS283 Links Search Google now! HTML Search Google now! output By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link. The target attribute specifies where to open the linked document. The target attribute can have one of the following values: _self - Default. Opens the document in the same window/tab as it was clicked _blank - Opens the document in a new window or tab _parent - Opens the document in the parent frame CS283 More about anchors Wikipedia HTML Harry Potter and the Deathly Hallows Wikipedia output Types of URLs that can appear in anchors: Absolute: to another web site Relative: to another page on this web site CS283 Images HTML If placed inside an a anchor, the image will become a link The title attribute specifies an optional tooltip CS283 Line Break One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them. In the Land of Mordor where the Shadows lie. HTML One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them In the Land of Mordor where the Shadows lie. output br should be immediately closed with /> br should not be used to separate paragraphs or used multiple times in a row to create spacing CS283 Comments CS courses are a lot of fun! HTML CS courses are a lot of fun! output Comments are useful for disabling sections of a page Comments cannot be nested and cannot contain a -- CS283 Phrase elements , HTML is really, REALLY fun! HTML HTML is really REALLY fun! output em: emphasized text (usually in italic) strong: strongly emphasized text (usually in bold) The tags must be properly nested for a valid page CS283 Unordered list: , No shoes No shirt No problem! HTML No shoes No shirt No problem! output ul represents a bulleted list of items (block) li represents a single item within the list (block) CS283 Nested unordered lists CS283 Harry Potter characters: Harry Potter Harry Potter characters: Hermione Harry Potter Ron Hermione Ron LOTR characters: LOTR characters: Frodo Bilbo Frodo Sam Bilbo Sam output HTML Ordered list Apple business model: Beat Microsoft Beat Google Conquer the world! HTML Apple business model: 1. Beat Microsoft 2. Beat Google 3. Conquer the world output ol represents a numbered list of items we can make lists with letters or Roman numerals CS283 using CSS (later) Common error: Not closing a list! No shoes No shirt No problem! Paragraph after list... HTML No shoes No shirt No problem! Paragraph after list... output If you leave a list open, subsequent contents will be indented CS283 Common Error: Improper nested list placement Harry Potter characters: Harry Potter Hermione Ron LOTR characters: Frodo Bilbo Sam HTML closing the outer li too early (or not at all) will render CS283 correctly in most browsers, but it is incorrect XHTML Definition list , , newbie one who does not have mad skills jaded tired, bored, or lacking enthusiasm frag a kill in a shooting game HTML newbie one who does not have mad skills jaded Tired, bored, or lacking enthusiasm frag a kill in a shooting game output dl represents a list of definitions of terms dt represents each term, and dd its definition CS283 Tables , , 1,11,2 okay 2,1 real wide2,2 HTML 1,1 1,2 okay 2,1 real wide 2,2 output CS283 Tables (Cont.) table defines the overall table, tr each row, and td each cell's data Useful for displaying large row/column datasets NOTE: tables are sometimes used by beginners for web page layout, but this is not proper semantic HTML and should be avoided Table headers, captions: , My important data Column 1Column 2 1,11,2 okay 2,1 real wide2,2 HTML My important data Column 1 Column 2 1,1 1,2 okay 2,1 real wide 2,2 output □ th cells in a row are considered headers □ a caption at the start of the table labels its meaning Quotations As Lincoln said in his famous Gettysburg Address: Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal. HTML As Lincoln said in his famous Gettysburg Address: Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal. output The element defines a section that is quoted from another source Browsers usually indent the lengthy quotation Inline quotations Quoth the Raven, Nevermore. HTML Quoth the Raven, “Nevermore.” output Why not just write the following? Quoth the Raven, "Nevermore." We don't use " marks for two reasons: XHTML shouldn't contain literal quotation mark characters; they should be written as " using allows us to apply CSS styles to quotations HTML Character Entities character(s) entity < > éèñ é è ñ ™© ™ © πδΔ π δ Δ И И "& " & Inline quotations <p> <a href="http://google.com/search?q=xenia&ie=utf- 8&aq=t"> Search Google for Xenia </a> </p> HTML Search Google for Xenia output Computer code The ul and ol tags make lists. HTML The ul and ol tags make lists. output code: a short section of computer code Preformatted text Bill Gates speaks You will be assimilated Microsoft fans delirious HTML Bill Gates speaks You will be assimilated Microsoft fans delirious output Displayed with exactly the whitespace / line breaks given in the text Shown in a fixed-width font by default Preformatted text public static void main(String[] args) { System.out.println("Hello, world!"); } HTML public static void main(String[] args) { System.out.println("Hello, world!"); } output When showing a large section of computer code, enclose it in a pre to preserve whitespace and a code to describe the semantics of the content W3C XHTML Validator HTML Validates checks your HTML code to make sure it meets the official strict XHTML specifications Web page metadata