02 HTML.pdf

ITEC 1010 Information and Organizations F2024, Section A HTML References: https://www.w3schools.com © 2022 Pavlovych Stylin’ with CSS: A Designer's Guide: Wyke-Smith, Charles © 2018 C...

ITEC 1010 Information and Organizations F2024, Section A HTML References: https://www.w3schools.com © 2022 Pavlovych Stylin’ with CSS: A Designer's Guide: Wyke-Smith, Charles © 2018 CENGAGE, ALL RIGHTS RESERVED What is the World Wide Web (WWW) A way of accessing information on the Internet Information is encapsulated in a web page and viewed in web browser Web pages are linked to one another via hypertext links Clicking on a link accesses the associated web page or resource www ≠ Internet Internet: infrastructure www: one of the services on internet 2 Client–Server Model Describes the interaction of networked computers o Clients request information from servers o Servers respond with the information (if applicable)b server Any computer can act as a client or server o Computer typically described as “client” or “server” based on its role the majority of the time HTTP protocol in use 3  HTML = Hyper Text Markup Language An HTML page consists of: Document Type Declaration (DTD); triggers the rendering mode e.g., Mostly useless, but still required A system of directives (called tags) on how to render content in a web browser Tags are specific words always enclosed in angle brackets Character-based content, placed inside tags (tags act like containers, or boxes) Entity references, pointing to non-textual information, located outside the HTML file, to be rendered on the web page An HTML page is saved a single text file with extension.htm or.html HTML is case-insensitive – except for the text content Spacing (blanks, tabs, etc.) are ignored, but may help readability – for the designer Online reference for the full HTML syntax http://www.w3schools.com/tags/ 4  Anatomy of an HTML Document Some elements that must be present in every web page A template with which you start all web pages HTML 5 has greatly simplified this template An HTML Page 5  The HTML Template Line 1: Identifies this document as an HTML document Line 2: Root level tag marking the beginning and the end of the document Its end tag on line 10 is the very last tag in the document Has only two child tags: head and body An HTML Page Line 3: Starts the section that tells the browser how to display the page Line 4: Identifies the character encoding to use Line 5: identifies the text to display at the top of the browser window when this page is rendered Line 7: Starts the section that contains your actual content Line 8: This is a comment. Comments are not displayed on the web page. 6  HTML Tags Two types of tags: Enclosing tag: is in fact a pair of tags, with the same name Start (opening) tag: e.g., for paragraph End (closing) tag: e.g., for end of paragraph Syntax: Your text here Non-enclosing (or empty) tag: only the start tag, here – used to include a reference to an entity, image Syntax: E.g., Others: , Consider “closing” the end tags with /> instead of >, even though HTML 5 does not require them. XML does. Align start and end tags to help you see the structure better. 7  Compound Elements Some tags are designed to work only in combination with other tags E.g., The List Item tag li only works inside an Ordered List tag ol or an Unordered List tag ul Here is a simple ordered list with three items and how it is rendered: First Item Second Item Third Item 8  Nested Tags In the previous example you can see that the pair of tags, including the text between them, appears in its entirety between the pair of tags This approach is called nesting of tags Nesting is not limited to compound elements (like lists) Commonly used for grouping content (with structural tags) and for inserting external content inside text (with non-enclosing tags) In nesting tags you must place end tags in reverse order of the start tags (i.e., the end tag of the most recent start tag must come first) Wrong: That car is fast. Right: That car is fast. 9  Attributes Attributes provide the browser with additional information about the tag Where to find resources How to render (display) the information, including styles, colors, spacing, positioning Follow the syntax attribute-name="attribute-value" Different tags allow different attributes Multiple attributes can be specified for a single tag, separated by a space Although usually attributes can be specified omitting the quotes, it is better to always use them (quotes are non-optional in XHTML) Attention: both single and double quotes exist in several versions: straight (") and curved (“) HTML accepts only straight ones, so make sure you have the right kind. 10  Attributes Examples Provide additional characteristics for a tag Syntax: attrName="value" Examples: … Content between these tags will be centered aligned Displays the image indicated by src (path or URL) and restricts the image to 300 pixels wide, by 200 pixels high York University Displays “York University” as a hyperlink to the path or URL indicated by href (in this case, www.yorku.ca) A full reference of HTML tags and attributes are available at w3schools.com 11  Frequently Used Tags Most of the information on a web page is text HTML5 provides 6 levels of Headings h1, h2, h3, h4, h5, h6 : Headings (h1 being the highest level) Most text goes into paragraphs p : Paragraph Lists can be ordered (numbered) or unordered (bulleted) ol : Ordered List ul : Ordered List As you recall from compound tags, each list item uses the List Item tag li Quotations use the blockquote tag To place text on a new line inside a paragraph, use the non enclosing Break tag br To separate text with a horizontal line, use the Horizontal Rule non enclosing tag hr AP/ITEC 1010 – Information and Organizations 12  Related Tag Example AP/ITEC 1010 – Information and Organizations 13  Related Tag Example AP/ITEC 1010 – Information and Organizations 14  Images, Provide the location of a graphic file, and insert the graphic into the page They use the img non enclosing tag with: The src attribute that specifies the location of the image file Possible locations URL for images located somewhere else on the web Full local path (in Windows full path, starting with drive letter, folders and subfolders, down to actual image fine name A relative path If only a file name is provided, the image file must be located in the same directory as the HTML file The file name can be preceded by./folder/ indicating that the image file is located in the named subfolder located in the same folder as the HTML file The alt attribute that specifies what to display when the image is missing, or read out in voice rendering mode E.g., Always code the alt attribute on any tag. Otherwise audio rendering does not work well, nor does displaying 15 when the file is missing.  (Hyper)Links Links are tags that provide a mechanism to navigate to another website, or another part of the same website, or to take some other action. They use the anchor a tag with: The href attribute that specifies the target place A text that will become the active link For navigating to another web page the href attribute takes a URL value E.g.: My Website For navigating to another spot on the same web page The href attribute specifies a location using the syntax "#location" The element we link to must specify the id attribute using the syntax id="location" E.g.: Skip to Chapter 3 Chapter 3 For sending an email the href attribute uses the syntax: E.g.: E-mail Me 16  Links and Images An HTML Page Stylin' with CSS Great Web pages start with great HTML markup! My Website