HTML Lecture Notes PDF

HTML (Part 1) Assoc. Prof. Mohammad Faidzul Nasrudin Learn by Doing://  HyperText Markup Language HTML is stands for HyperText Markup Language. It is the language to create web pages. Markup refers to data included in an electronic document. A markup l...

HTML (Part 1) Assoc. Prof. Mohammad Faidzul Nasrudin Learn by Doing://  HyperText Markup Language HTML is stands for HyperText Markup Language. It is the language to create web pages. Markup refers to data included in an electronic document. A markup language is a set of rules governing what data may be included in a document and how it is combined with the content of the document to facilitate use by humans and computer programs. It is plain text, but includes a variety of tags that define the structure of the document, and allow documents to include headings, paragraphs, images, links, lists, tables, and other features. It defines the structure of text-based and multimedia information in a web page.  HyperText Markup Language (2) HTML is relatively easy to learn because every tag is predefined, so only we need to know the work of tags and their attributes. Web browsers (Chrome, Internet Explorer, Firefox, Safari, etc) in desktop/laptop/tablet/phone are software to read HTML and display web page as output. You can write HTML in any simple editor such as Notepad. And other software such as Adobe Dreamweaver, Sublime, NetBeans, Notepad ++, VSCode, etc. ".html" or ".htm" are the two extensions used to write and save HTML files We can write HTML code in any text editor and save it as "filename.html" or "filename.htm".  History of HTML Tim Berners-Lee, a physicist at the CERN research institute in Switzerland invented HTML in 1991. The Web was originally developed to meet the demand for automated information-sharing between scientists in universities and institutes. HTML is a very evolving markup language and has evolved with various versions updating. The first version consisted of 18 HTML tags. Now, there are currently about 142 HTML tags. The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C).  Tags and Attributes Example All HTML pages have a series of HTML elements, 1. Go to consisting of a set of tags and attributes. Home Page A tag tells the web browser where an element begins 2. Although HTML element and and ends, whereas an attribute describes the attribute names are case characteristics of an element. 3 parts of a element: insensitive (you can use – Start tag – to state where an element starts to take uppercase and lowercase effect. E.g. use the start tag to create a link. letters), it is a good – Content – this is the output that other users see. practice to use only – End tag – the same as the opening tag, but with a lowercase letters. Enclosing forward slash before the element name. E.g. to end a link. attribute value is either single or double quotes. There are several so-called “void elements” that do not have end tags. 3.  Must Have Elements Example Every HTML page uses these tags: 1. – tag is an instruction to the web 2. browser about what version of HTML the page is written 3. in. This ensures that the web page is parsed the same way by different web browsers. 4. For HTML5: 5. For HTML 4.01: "http://www.w3.org/TR/html4/loose.dtd" 8. – tag is the root element that defines the whole 9. HTML document. – tag holds meta information such as the page’s title and charset. You can put CSS and JavaScript here. – tag encloses all contents that appear on the page.  Hello World! This first example displays the message Hello World!. Please note that HTML does not recognize white spaces. – How to add a space or blank character? – How to put cursor to the next line? Insert comments in your HTML markup to improve readability and describe the content of a document. The browser ignores comments when your document is rendered. – Comments start with https://liveweave. The tag is render as a line break in most browsers—any text com/Ln2mUy following a br tag is rendered on the next line.  Title Element The title element describes the web page. Two main functions of the title element: – It usually appear in the title bar at the top of the browser window, in the browser tab on which the page is displayed. – It becomes 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. https://liveweave. com/DkHhYV  Paragraph and Headings All text placed between the and tags forms one paragraph. 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. Paragraph and heading are block-level elements. They takes up the entire width of a page. It always starts a new line in the document. E.g. https://liveweave. com/NDlk5u a heading element will be in a separate line from a paragraph element. On the other hand, an inline element formats the inner content of block-level elements, such as adding links and emphasized strings without breaking the flow of the content.  Hyperlinks A hyperlink references or links to other resources. Web browsers typically underline text hyperlinks and color them blue by default. Hyperlinks are created using the (anchor) tag. Attribute href (hypertext reference) specifies a resource’s location, such as – a remote web page (needs “http://”) or location within a web page – a file – an e-mail address Attribute target specify where to open the linked document. It is either https://liveweave. _blank, _self, _parent or _top. com/YMGgfQ If href is blank or “#”, it refers to the current page. When a URL does not indicate a specific location, the web server returns a default web page, usually index.html or index.php.  Hyperlinks and Email Example Anchors can link to an e-mail address by setting href 1. Contact Me 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.  Internal Links The tag can be used to 1. Page Title link to another section of the 2.... same document by specifying 3. Go to Top the element’s id as the link’s href. To link internally to an element with its id attribute set, use the syntax #id. https://liveweave. com/a6rpDn  Images The following image formats can be used in HTML: jpeg, gif, png, apng, svg, bmp, bmp ico, png ico. But it depends on the browser. The gif supports both animated and static images. The tag is used to insert images. It’s: – src attribute specifies an image’s location. – width and height (in pixels) are optional attributes. If omitted, the browser uses the image’s actual width and height. Please include them to make your page load faster. https://liveweave. com/DWxXUr  Images as Hyperlinks By using images as hyperlinks, you can create graphical web pages that link to other resources. You need to “wrap” the tag inside an tag. Image alt attribute contains text that is displayed if the client cannot render the image. It makes web pages more accessible to users with disabilities, especially vision impairments. – Speech synthesizer software can speak the alt attribute’s value so that a visually impaired user can understand what the browser is displaying. https://liveweave. You can use tag to define an image map with clickable areas (or com/rvIWDI hotspots).  Absolute and Relative File Path An absolute file path is the full URL to a file. It has “http://...” A relative file path points to a file relative to the current page. E.g. Path Description The "picture.jpg" file is located in the same folder as the current page The "picture.jpg" file is located in the images folder in the current folder The "picture.jpg" file is located in the images folder at the root of the current web The "picture.jpg" file is located in the folder one level up from the current folder The best practice to use relative file paths (if possible) because your web pages will not be bound to your current base URL.  Absolute and Relative File Path (3) Example How to include those images in dog_gallery.html? 1. 2. 3.  Special Characters HTML5 provides character entity references (in the form &code;) for representing special characters that cannot be rendered otherwise The code can be: – Word abbreviations. E.g. &amp, &lt, &copy, etc https://liveweave. com/k7pCXW  Special Characters (2) The code also can be in numbers: – Decimal – Hexadecimal E.g. a percentage is % in decimal or % Refer to character reference in the printable ASCII characters list.  Horizontal Rules A horizontal rule, indicated by the tag renders a horizontal line with extra space above and below it in most browsers. The horizontal rule element should be considered a legacy element and you should avoid using it. CSS can be used to add horizontal rules and other formatting to documents. https://liveweave. com/Q4qH4t  Ordered, Unordered and Nested Lists The tag is used to insert unordered list. – It creates a list in which each item in the list begins with a bullet symbol (typically a disc) – Each entry is an (list item) tag. Most web browsers render these elements with a line break and a bullet symbol at the beginning of the line. The ordered-list tag creates a list in which each item begins with a number. Lists may be nested to represent hierarchical relationships, as in a multi-level outline. https://liveweave. com/v9CgNn  Tables The tag defines an HTML table. Tables are frequently used to organize data into rows and columns. A table can be split into 3 distinct sections: – Head: tag Table titles Column headers – Body: tag Primary table data – Table Foot: tag Calculation results Footnotes Whatever displays at the bottom in the page  Tables (2) The tag specifies a table’s title. The summary attribute summarizes the table’s contents and is used by speech devices to make the table more accessible to users with visual impairments. tag – Defines a header cell. You can set a row or column as a header tag – Defines individual table rows https://liveweave. tag com/U1Qlxn – Contains table data  Merging Table Cells You can merge data cells with the rowspan and colspan attributes. – The values of these attributes specify the number of rows or columns occupied by the cell. – Can be placed inside any data cell or table header cell. https://liveweave. com/DbvPH2  Div vs Span and tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. tag is used intensively in CSS (like in Bootstrap framework) to define certain part of the page e.g. header, menu, navigation bar, content, footer, etc. tag is a block-level tag. In this example, the div tag contains the entire width. It will be displayed div tag each time on a new line, not on the same line. https://liveweave. com/al2oxs tag is a generic inline container for inline elements and content. It used to group elements for styling. A better way to use it when no other semantic element is available.  Inline Tags for Text Formatting HTML contains several tags for defining text with a special meaning. Text also can be formatted using CSS. Please open the codes to see all tags for text formatting. https://liveweave. com/I93Jhq  Meta Elements Example Metadata will not be displayed on the page, but is 1. machine parsable. 2. – The name attribute identifies the type of meta element 3. words that describe a page 4. sometimes displayed as part of the search result 5. Of a generator type: defines the software packages used to 6. generate the document.  Meta Elements (2) Example There are other usage of meta tag with a specific 1. function: 2. – tag with charset attribute specifies the character 3. – tag with http-equiv="refresh" attribute specifies 4. the timed refresh. Thank you For your attention