HTML – Standard Markup Language for Documents Designed for Web Browser

Web Development - Basics 1 HTML – Standard Markup language for documents designed for web browser. CSS – Styling (Adding presentation) JavaScript – Scripting language for adding interactivity in web pages Frameworks – CSS (Bootstrap) JavaScript frameworks (Angular /React ) 2 HTML HTML History HTML is not case sensitive XHTML is case sensitive Source: https://slideplayer.com/ - Amber Pratt HTML Basics HTML element— HTML is composed of elements. An element is a unit of content in an HTML document formed by HTML tags and the text or media it contains. Anatomy of an HTML Paragraph Element HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket. Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets. Content — Everything contained between the opening and closing tags of an Tags in HTML are case-insensitive HTML element. Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket. These elements structure the webpage and define its content. Structure of a HTML Web Page <!DOCTYPE html> Instructs the web browser about the version of HTML used <html lang="en"> Specifies the language of HTML content character format( <head> Unicode Text Format) <meta charset="UTF-8"> Define website <meta name="viewport" content="width=device-width, initial-scale=1.0"> responsiveness <title>Document</title> </head> <body> <h1> Heading </h1> </body> </html> Starting with HTML 1. Open Notepad. <!DOCTYPE html> 2. Add these lines of HTML code. <html> 3. Save as .html file. <head> 4. Open in web browser. <title>My First Web Page</title> </head> <body> <h1>Content will be inside body</h1> <h2>This is another heading</h2> </body> </html> 7 Some basic HTML tags • <h1> – <h6> • <p> • <br> • <hr> • <a> • <img> • Special Characters 8 Understanding Directories – Relative Paths <img src="mypic.jpeg" alt="My picture"> File with the current folder <img src="images/mypic.jpeg" alt="My images picture"> File within folder in the current folder two dots (. .) these tell the browser that you want to go back one directory <img src="../mypic.jpeg" alt="My images picture"> File in the parent folder of the current folder <img src="..images/mypic.jpeg" alt="My images picture"> File in a folder in parent folder of the current folder 9 10 Text Formatting • (<u>) • (<b>) • (<i>) • Subscript(<sub>) • Superscript(<sup>) • Pre (<pre>) • Code(<code>) • Strong(<strong>) • Emphasize(<em>) • Ins(<ins>) • del(<del>) • <small> 11 Lists • Ordered lists • Unordered lists • Description lists 12 Tables • <table> • <caption> • <thead> • <tbody> • <tfoot> • <tr> • <th> • <td> • colspan, rowspan 13 Simple Forms • <form> • <label> • <input> • <select> • <textarea> • <button> Refer to https://www.quackit.com/html/html_4/tags/html_input_tag.cfm for details 14 The Structure HTML Elements HTML Code <em>first</em><em>second</em><em>third</em> In-Line Elements <p>fourth</p><p>fifth</p><p>sixth</p> <img src="../images/firefox-icon.png"> HTML Elements Block Level Elements Output Empty Elements / Void Elements firstsecondthirdfourth fifth Sixth 16 HTML Attributes HTML Attributes HTML elements can have attributes. Attributes provide additional information about elements. Attributes are used to control the element's behaviour. Attributes are always specified in the starting tag. Attributes generally come in name / value pairs. <img src="logo.gif" alt="Angus-Black Scottish Terrier" height="100" E.g. <p align=“center”>This is centrally aligned</p> width="100"> Note: Values should always be placed between single or double quotes. 17 HTML Attribute Types Attribute Types needed by a particular element type for that element Required type to function correctly. E.g. <img> tag – src and alt used to modify the default functionality of an element Optional type. E.g. <img> tag- border, height supported by a large number of element types. Standard / Global E.g. Class, Id, Hidden, Title used to cause element types to specify scripts to be run Event under specific circumstances. E.g. onclick, onblur 18 Syntax – DTD (Document Type Definition) DTD define the allowed syntax that can be used for various elements of HTML. (X)HTML documents should begin with a DOCTYPE declaration. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML document - HTML version with Root element HTML URI of the DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 19 DOCTYPE WHAT WHY HOW in HTML5 A DOCTYPE is a required Including the DOCTYPE in a <!DOCTYPE html> preamble needed for legacy document ensures that the reasons. browser makes a best-effort attempt at following the relevant specifications. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Conformance Checking DTD defines the actual elements, attributes and relationships that are valid in documents. Specifications conformance is a good practice and ensures appropriate rendering in different browsers. The process of checking whether a document conforms to the rules of the DTD is called validation. DOCTYPE allows validation software to identify the HTML DTD being followed and verify that the document is syntactically correct. Online Validator: http://validator.w3.org. You can add a quality badge in your site to prove standards conformance 21 What’s in the HEAD ? The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains metadata about the document o Title Element o Meta Element Title : The <title> element is metadata that represents the title of the overall HTML document. <head> <title>Title Element </title> </head> 22 What’s in the HEAD ? Meta : The <meta> element adds metadata to a document. o Charset: This element simply specifies the document's character encoding. <meta charset="utf-8"> (utf-8 is a universal character set that includes pretty much any character from any human language.) o Many meta elements contain name and content attributes. <meta http-equiv= "Content-Type" content= “text/html"> <meta name=“keywords" content= “HTML, CSS, Bootstrap"> <meta name="author" content="Jyoti Sahni"> <meta name="description" content="Hands on Web Application Development"> <meta name="viewport" content="width=device-width, initial-scale=1"> o Link to CSS and other references <link rel="stylesheet" href="external.css"> <script src="my-js-file.js"></script> 23 What’s in the HEAD ? Explore other elements allowed in HEAD. o Base < base > o Style < style > o Comment  24 Browsers and HTML When a browser reads a marked-up document it builds a Parse tree to interpret the structure of the document. These parse trees are called DOM (Document Object Model) trees. DOM trees helps browsers to determine how to render the page visually. Many a times browsers fix arbitrary syntactical errors. <em> <strong> Hello <em> <strong> <p> This is a paragraph <p> This is another paragraph 25 Browsers and HTML DTD for HTML5 <!DOCTYPE html> <html> <head> <title>My title</title> </head> <body> <h1> A heading</h1> <a href="http://www.google.com">Link text </a> </body> </html> 26 Browsers and HTML There are three modes used by the layout engines in web browsers: quirks mode almost standards mode full standards mode. How do browsers determine which mode to use For HTML documents, browsers use a DOCTYPE in the beginning of the document to decide whether to handle it in quirks mode or standards mode. 27 HTML5 HTML5 is the latest evolution of the standard that defines HTML. The current standard, the HTML Living Standard is developed by WHATWG (Web Hypertext Application Technology Working Group), which is made up of the major browser vendors (Apple, Google, Mozilla, and Microsoft). It is a new version of the language HTML, with new elements, attributes, behaviours, and technologies for building more diverse and powerful Web sites and applications. Support for rich multimedia and other new features thereby reduce the need for external plugins and scripts. HTML5 It subsumes HTML4 and XHTML and is Backward compatible Improve semantic definition for ease of readability by humans and computers Make rendering of web content independent of the device being used (viewport tag and CSS media queries). Support for interactive web applications that can interact with users, their local data, and servers more easily and effectively than was previously possible. How is HTML5 different from previous versions • Multi-media support - Audio, Video controls (Earlier versions of HTML required Flash player support) • Improved Semantics for elements - <section>, <article>, <nav>, <header> etc. • Geolocation Support – Easily through JS Geolocation API (Earlier was cumbersome and mostly not very accurate) • Graphics support – Canvas and SVG (Earlier versions of HTML required Flash player support, VML) • Multiple storage options – Browser cache, Application cache, SQL database (Only browser cache) • Socket support – Allows full duplex communication (Earlier done by streaming and pooling) • Web worker API – Brings threading to JavaScript • Persistent Error Handling – Standardized process to handle errors • Mobile Web made easier – View Port tag with support of media queries 30 HTML5 Page Layout Semantic Elements <header> Element • It is used to include introductory content or navigational aids that are specific to any single section of a page • It is usually placed at the top of a page or section • It can contain title, logo, search bar, menu bar etc. • E.g. Cricbuzz website header Semantic Elements <main> Element • Represents the dominant content inside the <body> of a document • Consists of content that is directly related to the central topic of a document • A document must not have more than one <main> element • It doesn’t contribute to the document’s outline Semantic Elements <section> Element • It defines a generic section of a document or application • It is a thematic grouping of content, typically with a heading • E.g.

HTML – Standard Markup Language for Documents Designed for Web Browser

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support