Introduction to Web Programming Lecture Notes PDF

Introduction to Web Programming Lecture 2: Introduction to HTML5: PART (2) Images, hyperlinks, lists and tables Natheer Gharaibeh 1 Outlines of today’s lecture Element attributes HTML elements–images HTML elements–hyperlinks HTML elem...

Introduction to Web Programming Lecture 2: Introduction to HTML5: PART (2) Images, hyperlinks, lists and tables Natheer Gharaibeh 1 Outlines of today’s lecture Element attributes HTML elements–images HTML elements–hyperlinks HTML elements–lists HTML elements–tables 2 But first … what we addressed last week What is HTML? Why do we use it? What is the general structure of HTML documents? What elements did we cover? 3 Let’s look at the big picture again! From Head first HTML and CSS, by Robson, E., & F4reeman, E., 2012, O'Reilly Media, Inc What does the web server do? From Head first HTML and CSS, by Robson, E., & Freeman, E., 2012, O'Reilly Media, Inc 5 What does the browser do? From Head first HTML and CSS, by Robson, E., & Freeman, E., 2012, O'Reilly Media, Inc 6 HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name=“value” Always use lowercase and quote your attribute values 7 Examples The lang Attribute The lang attribute specifies the language of the element's content Syntax: Language code reference The document language can be declared in the tag Example: 8 What if?! Are quotations necessary in attribute values? Omitting quotes might produce errors! So always use them. Example? Single or double quotes? It depends on the value of the attribute. Example? 9 HTML Elements–Images We’ve shown how to mark up documents that contain only text, but web pages may also contain images, animations, graphics, audios and even videos. img element is used to include an image in the document. HTML Images Syntax In HTML, images are defined with the tag. The tag is empty, it contains attributes only, and does not have a closing tag. 10 Image Attributes The src attribute Tells the browser where it can find the image file It is good practice to create a folder for all of the images the site uses The alt attribute Specifies an alternate text for the image, if it cannot be displayed The value of the alt attribute should describe the image in words, hence it is useful for accessibility applications Image Size - Width and Height You can use the attributes width and height to specify the size of an image The values are specified in pixels Images often take longer to load than the HTML code that makes up the rest of the page. It is, therefore, a good idea to specify the size of the image so that the browser can render the rest of the text on the page while leaving the right amount of space for the image that is still loading 11 Image Demo! 12  HTML5: FIGURE AND FIGURE CAPTION Images often come with captions. HTML5 has introduced a new element to contain images and their caption so that the two are associated figure caption goes here. You can have more than one image inside the element as long as they all share the same caption 13 HTML Elements–Hyperlinks A hyperlink references or links to other resources, such as HTML documents, sections within documents, images…etc Can be a text, or an image that you can click on, and jump to another document Web browsers typically underline text hyperlinks and color them blue by default In HTML, links are defined with the tag Link Syntax: link text The href attribute specifies the destination of a link The link text is the visible part and it does not have to be text. It can be an HTML image or any other HTML element 14  HTML Hyperlinks–the target attribute The target attribute specifies where to open the linked document To open the linked document in a new window or tab: target=“_blank“ Example: Visit W3Schools! To open the linked document in the full body of the window or tab: target=“_top" Example: Visit W3Schools! 15 HTML Links–the id attribute HTML bookmarks are used to allow readers to jump to specific parts of a Web page. The id attribute can be used to create bookmarks inside HTML documents. Bookmarks are not displayed in any special way. They are invisible to the reader. Example Add an id attribute to any html element: Useful Tips Section Then create a link to the bookmark (Useful Tips Section)from the same page: Visit the Useful Tips Section Or, create a link to the bookmark (Useful Tips Section) from another page: Visit the Useful Tips Section 16  HTML Elements–Lists HTML offers three types of lists: Unordered lists Ordered lists Description lists 17 Unordered Lists An unordered list starts with the tag Each list item starts with the tag The list items will be marked with bullets which are small black circles (default) Style attribute might be added to the tag to define how the list items will be marked 18 Example–Different Styles of Unordered List 19 Ordered Lists An ordered list starts with the tag Each list item starts with the tag The list items will be marked with numbers (default) A type attribute can be added to an ordered list, to define the type of the marker 20  Example– Different Styles of Ordered List 21 Description/Definition Lists A description/definition list, is a list of terms, with a description of each term The tag defines a description list The tag defines the definition term, and the tag defines the data (description) Example: Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc. 22 Example–Nested List 23 HyperLinks and Lists Demo! 24  HTML Elements–Tables Tables are defined with the tag A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). td stands for "table data," and holds the content of a data cell. A tag can contain text, links, images, lists, forms, other tables, etc If you do not specify a border attribute, the table will be displayed without borders 25 Table Tags Tag Description Defines a table Defines a table header Defines a table row Defines a table cell Define a table caption 26 References www.w3schools.com Robson, E., & Freeman, E. (2012). Head first HTML and CSS. O'Reilly Media, Inc. Duckett, J. (2011). HTML and CSS: Design and Build Websites. John Wiley & Sons. Deitel & Deitel (2011). Internet and World Wide Web How to Program, 5th Edition, Harvey & Paul Deitel & Associates. 27