Module 2_Week 2.pptx

‫الجامعة السعودية االلكترونية‬ ‫الجامعة السعودية االلكترونية‬ ‫‪26/12/2021‬‬ ‫‪1‬‬ College of Computing and Informatics Web Programming 2 Introduction to HTML5 3 Contents 1. Editing HTML5 2. Headings...

‫الجامعة السعودية االلكترونية‬ ‫الجامعة السعودية االلكترونية‬ ‫‪26/12/2021‬‬ ‫‪1‬‬ College of Computing and Informatics Web Programming 2 Introduction to HTML5 3 Contents 1. Editing HTML5 2. Headings 3. Linking 4 Weekly Learning Outcomes 1. Understand the important components of HTML5 documents. 2. Use HTML5 to create web pages. 3. Add images to web pages. 4. Create and use hyperlinks to help users navigate web pages. 5. Mark up lists of information. 6. Create tables with rows and columns of data. 5 Required Reading Chapter 2 (Internet and World Wide Web How To Program by Deitel & Deitel, 5th Ed) Recommended Reading 1. Chapters 4,5,6,7, and 8 (Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics 5th Edition) 2. What are new features introduced in HTML5? (Jun 17, 2016) https://developer-interview.com/p/html-css/what-are-new-features-intro duced-in-html5-57 3. HTML5 New Elements http://w3schools-fa.ir/html/html5_new_elements.html 6 1. Editing HTML5 7 Editing HTML 5 HTML5 (HyperText Markup Language 5) markup language that specifies the structure and content of documents ( CODE ) that are displayed in web browsers We’ll create HTML5 documents by typing HTML5 markup text in a text editor such as Notepad++ Sublime Atom TextEdit … We’ll save it with the.html or.htm filename extension. 8 First HTML5 Example Figure 2.1 is an HTML5 document * COEDE * named main.html Comments InTag This first example displays the message Welcome to HTML5! in the browser. 9 Document Type Declaration The document type declaration (DOCTYPE) is required in HTML5 documents so that browsers render the page in standards mode. Some browsers maintain backward compatibility with web pages that are not up-to-date with the latest standards. 10 Comments Insert comments in your HTML5 markup to improve readability and describe the content of a document. ( CODE ) The browser ignores comments when your document is rendered. Comments start with. 11 Html , head and body Elements *HTML5 markup contains text (and images, graphics, animations, audios and videos) that represents the content of a document and elements that specify a document’s structure and meaning. The html element encloses the head section (represented by the head element) and the body section (represented by the body element). 12 html, head and body Elements The head section contains information about the HTML5 document, such as the character set (UTF-8, the most popular character-encoding scheme for the web) that the page use—which helps the browser determine how to render the content—and the title. The head section also can contain special document-formatting instructions called CSS3 style sheets and client-side programs13 html, head and body Elements The body section contains the page’s content, which the browser displays when the user visits the web page. 14 Start Tags and End Tags * HTML5 documents delimit most elements with a start tag and end tag. A start tag consists of the element name in angle brackets. For example, An end tag consists of the element name preceded by a forward slash (/) in angle brackets. For example, There are several so-called “void elements” (empty element) that do not have end tags. Many start tags have attributes that provide additional information about an element, which browsers use to 15 determine how to process the element. Each attribute Title Element The title element is called a nested element, because it’s enclosed in the head element’s start and end tags. The title element describes the web page. Titles usually appear in the title bar at the top of the browser window, in the browser tab on which the page is displayed, and also as the text identifying a page when users add the page to their list of Favorites or Bookmarks, enabling them to return to their favorite sites. Search engines use the title for indexing purposes and when displaying results 16 Paragraph Element (...) All text placed between the and tags forms one paragraph Start Tag End Tag 17 W3C HTML5 Validation Service HTML5 documents that are syntactically correct are guaranteed to render properly. HTML5 documents that contain syntax errors may not display properly Validation services (e.g., https://validator.w3.org/#validate-by-upload) ensure that an HTML5 document is syntactically correct 18 2. Headings 19 Headings HTML5 provides six heading elements (h1 through h6) for specifying the relative importance of information Heading element h1 is considered the most significant heading and is rendered in the largest font. Each successive heading element (i.e., h2, h3, etc.) is rendered in a progressively smaller font. 20 3. Linking 21 Hyperlink A hyperlink references or links to other resources, such as HTML5 documents and images. Web browsers typically underline text hyperlinks and color them blue by default. ( Strong = Bold text ) ( href = Hyperlink reference ) 22 *The href attribute Links are created using the a (anchor) element. Attribute href (hypertext reference) specifies a resource’s location, such as a web page or location within a web page an e-mail address If the web server cannot locate a requested document, it returns an error indication to the web browser (known as a 404 error) 23  Two ways to specify a URL Absolute URLs Provide the full URL for the document, including the protocol (http://), the domain name, and the pathname as necessary You need to use an absolute URL when pointing to a document out on the Web (i.e., not on your own server) Example: href = “http://www.seu.edu.sa” Relative URLs Describe the pathname to a file relative to the current document can be used when you are linking to another document on your own site (i.e., on the same server) It doesn’t require the protocol or domain name—just the pathname. Example: href = “recipes/index.html” 24 Relative URL : Linking within a Directory 25 Relative URL : Linking to a Lower Directory 26 Relative URL : Linking to a Higher Directory 27 Relative URL : Site root relative pathnames 28 Hyperlinking to an E-Mail Address Anchors can link to an e-mail address using a mailto: URL When a user clicks this type of anchored link, most browsers launch the default e-mail program (e.g., Mozilla Thunderbird, Microsoft Outlook or Apple Mail) to enable the user to write an e-mail message to the linked address. 29 Thank You 30