HNDIT1022 Web Design PDF

HNDIT1022 – Web Design Week 2: Understanding HTML and XHTML  Subtopics Structure of simple web page Including all basic HTML tags How to organize your content with headings How to validate your web content How to differentiate HTML, XML, XHTML and HTML5....

HNDIT1022 – Web Design Week 2: Understanding HTML and XHTML  Subtopics Structure of simple web page Including all basic HTML tags How to organize your content with headings How to validate your web content How to differentiate HTML, XML, XHTML and HTML5. Structure of simple web page Including all basic HTML tags HTML stands for HyperText Markup Language. It is used to design web pages using the markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages and markup language defines the text document within the tag that define the structure of web pages. What is HTML used for ? HTML is used to create the structure of web pages that are displayed on the World Wide Web (www). It contains Tags and Attributes that are used to design the web pages. Also, we can link multiple pages using Hyperlinks. Creating HTML Pages Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or Notepad++ (PC) or TextEdit (Mac) An HTML file must have an.htm or.html file extension. You can use either.htm or.html as file extension. There is no difference, it is up to you Follow the steps below to create your first web page with Notepad or TextEdit. Step 1: Open Notepad (PC) or Open TextEdit (Mac) Step 2: Write Some HTML Step 3: Save the HTML Page Step 4: View the HTML Page in Your Browser Contd.. Step 1: Open Notepad (PC) or Notepad++(PC) Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad or Notepad++ Windows 7 or earlier: Open Start > Programs > Accessories > Notepad or Notepad++ Open TextEdit (Mac) Open Finder > Applications > TextEdit Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text" Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text". Then open a new document to place the code. Contd.. Step 2: Write Some HTML Write or copy the HTML code in the text editor. Step 3: Save the HTML Page Save the file on your computer. Select File > Save as in the Notepad menu. or Save the file in a folder with.html extension. We can easily save the html file by clicking on the File menu and then click on Save As option. After that, type the file name with.html extension. Step 4: View the HTML Page in Your Browser Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with"). Contd.. You can also use HTML editors (WYSIWYG Editors) to create your web page A WYSIWYG editor — short for "What You See Is What You Get" editor is a major asset when building or making changes to a website. It enables you to make changes and immediately see how they would be displayed on your live website.  Contd.. List of best WYSIWYG HTML editors Premium editors(commercial/paid) Adobe Dreamweaver CC Froala Setka Editor CoffeeCup HTML Editor List of Free WYSIWYG HTML editors Free editors(open source) CKEditor 4 Editor.js TinyMCE Quill Summernote Visual Studio Code ContentTools HTML tags HTML tags are the hidden keywords and used to create web pages in different format. Most of the tags contain two parts, opening tags and closing tags. The text of opening and closing tags are the same but the closing tags contains forward slash (/) character. There are some tags which do not require closing tags. HTML tags are not case sensitive, means the same as  HTML Syntax Closing tag HTML syntax: two-sided tag: document content Starting Properties of the tag. Actual content appears in webpage. Optional! It could be empty tag Examples: Welcome To Web Designing Happiness lies in the joy of achievement and the thrill of creative effort.  HTML element HTML documents are defined by HTML elements. An HTML element is everything from the start tag to the end tag. Example Start tag Element content End tag This is a paragraph 11  Syntax of HTML element An HTML element starts with a start tag An HTML element ends with an end tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes Nested HTML elements Most HTML elements can be nested HTML documents consist of nested HTML elements. 12  Example for HTML element This is my first web page Contains 3 HTML elements. 13  Empty HTML elements HTML elements with no content are called empty elements. is an empty element without a closing tag (the tag defines a line break). Empty elements can be "closed" in the opening tag like this:. HTML5 does not require empty elements to be closed. But if you want stricter validation, or you need to make your document readable by XML parsers, you should close all HTML elements.  HTML attributes HTML elements can have attributes Attributes provide additional information about the element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" Structure of simple web page Including all basic HTML tags Contd.. – A doctype or document type declaration is an instruction that tells the web browser about the markup language in which the current page is written. It is not an element or tag. The doctype declaration is not case-sensitive. – This tag is used to define the root element of HTML document. This tag tells the browser that it is an HTML document. It is the second outer container element that contains all other elements within it. Contd.. – This tag is used to define the head portion of the HTML document that contains information related to the document. Elements within the head tag are not visible on the front-end of a webpage. – The body tag is used to enclose all the visible content of a webpage. In other words, the body content is what the browser will show on the front end. Contd.. – This tag is used to define the head portion of the HTML document that contains information related to the document. Elements within the head tag are not visible on the front-end of a webpage. – The body tag is used to enclose all the visible content of a webpage. In other words, the body content is what the browser will show on the front end. A Basic HTML Document Example Page Title My Heading My Paragraph. Example Explained The declaration defines that this document is an HTML5 document The element is the root element of an HTML page The element contains meta information about the HTML page The element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The element defines a large heading The element defines a paragraph  First HTML Page first.html Opening tag Closing tag First HTML This is some paragraph An HTML element consists of an opening tag, a closing tag and the content inside  Example second.html Web Development Technology Welcome To HTML Example explained The first tag in your HTML document is. It tells your browser that this is the start of an HTML document The last tag in your document is. It tells your browser that this is the end of the HTML document. The text between the tag and the tag is header information. Header information is not displayed in the browser window.  Example explained (contd..) The text between the tags is the title of your document. The title is displayed in your browser's caption. The text between the tags is the text that will be displayed in your browser. is the visible page content The text between the and tags will be displayed in a bold font. 25 The Section Contains information that doesn’t show directly on the viewable page Starts after the declaration Begins with and ends with Contains mandatory single tag Can contain some other tags, e.g.  Section: tag Title should be placed between and tags SLIATE Used to specify a title in the window title bar Search engines and people rely on titles  Setting Document Properties Document properties are controlled by attributes of the BODY element. For example, there are color settings for the background color of the page, the document’s text and different states of links. 28  Color Codes Colors are set using “RGB” color codes, which are, represented as hexadecimal values. Each 2-digit section of the code represents the amount, in sequence, of red, green or blue that forms the color. E.g. A RGB value with 00 as the first two digits has no red in the color. Main Colours 29  The Body Element The BODY element of a web page is an important element in regards to the page’s appearance. This element contains information about the page’s background color, the background image, as well as the text and link colors. E.g. TEXT="#RRGGBB" to change the color of all the text on the page (full page text color) Here are the attributes of the BODY tag to control all the levels: bgcolor Background text 30 Background Color It is very common to see web pages with their background color set to white or some other colors. To set your document’s background color, you need to edit the element by adding the BGCOLOR attribute. E.g. 31 TEXT Color The TEXT attribute is used to control the color of all the normal text in the document. The default color for text is black. E.g. The TEXT attribute would be added as follows: Document's content. In this example the document’s page color is white and the text would be red. 32  Using Image Background The BODY element also gives you ability of setting an image as the document’s background. An example of a background image’s HTML code is as follows: Document's content. 33  HTML headings HTML headings are defined with the to tags. defines the largest heading. defines the smallest heading. Example This is a heading This is a heading This is a heading Browsers automatically adds an empty line before and after headings. 34 HTML paragraphs HTML paragraphs are defined with the tag Example This is a paragraph. This is a paragraph. This Is a paragraph. HTML automatically adds an extra blank line before and after a paragraph  Line breaks The tag is used when you want to end a line, but don't want to start a new paragraph. The tag forces a line break wherever you place it. Example – This is a paragraph with line breaks – The tag is an empty tag. It has no closing tag. 36  Comments in HTML Comments are written like this: 37  HTML Rules (Lines) The or tag is used to create an horizontal rule (line). Example This is a paragraph This is a paragraph This is a paragraph  Exercise SLIATE EVENTS SPORTS DAY RESEARCH SYMPOSIUM TECHNOSOFT CONVOCATION ENZEAL TOURISM DAY Sri Lanka Institute of Advanced Technological Education(SLIATE) is proud to announce the above events Join with us Exercise: Output  The output of the HTML Will create different results. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one space, and any number of spaces count as one space. Text Formatting Tag Description bold text big text emphasized text italic text Underlined text small text strong text subscripted text superscripted text Pre formatted text - Example This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i= 1 to 10 print i next i Pre formatted text – Cont. Exercise List of HTML Text formatting Tags bold text bigger text italic text emphasized text underlined text important text smaller text subscript and superscript H2 X2 Exercise: Output  How to validate your web content Why we need to validate the HTML Code? As a beginner it is very common that you will make mistake in writing your HTML code. Incorrect or non-standard code may cause unexpected results in how your page displayed or function in browsers. To prevent this you can test or validate your HTML code against the formal guidelines and standards set by the Wide Web Consortium (W3C) for HTML/XHTML web pages. The World Wide Web Consortium provide a simple online tool (https://validator.w3.org/) that automatically check your HTML code and point out any problems/errors your code might have, such as missing closing tags or missing quotes around attributes. Contd..  Difference between HTML and XHTML S.No. HTML XHTML XHTML stands for Extensible Hypertext 1. HTML stands for Hypertext Markup Language. Markup Language. It was developed by W3C i.e World Wide Web 2. It was developed by Tim Berners-Lee. Consortium. 3. It was developed in 1991. It was released in 2000. 4. It is extended from SGML. It is extended from XML and HTML. 5. The format is a document file format. The format is a markup language. In this, every tag and attribute should be in 6. All tags and attributes are not necessarily to be in lower or upper case. lower case. Doctype is very necessary to write at the top 7. Doctype is not necessary to write at the top. of the file. It is necessary to close the tags in the order 8. It is not necessary to close the tags in the order they are opened. they are opened. While using the attributes it is not necessary to mention quotes. For While using the attributes it is mandatory to 9. e.g.. mention quotes. For e.g.. 10. Filename extension used are.html,.htm. Filename extension are.xhtml,.xht,.xml.  Difference between XML and XHTML Parameters of Comparison XML XHTML XML represents Extensive Markup XHTML represents Extensible Full-Form Language. Hypertext Markup Language. XML refers to a simple text-based format that is used for XHTML refers to a cross between representing structured Definition XML and HTML that is used for information like data, transactions, transiting from HTML to XML. configuration, documents, invoices, books, and so on. XHTML was initially released in Release XML was first published in 1998. 2000. XHTML is developed based on XML has a hierarchical tree-shaped Structure three main components- structure which is called XML tree. declaration, head, and body. XHTML comprises three versions- Components XML is composed of Unicode. XHTML Transitional, XHTML 1.0 Frameset, and XHTML 1.0 Strict.  Difference between HTML and HTML5 HTML HTML5 It didn’t support audio and video without the use of flash player support. It supports audio and video controls with the use of and tags. It uses cookies to store temporary data. It uses SQL databases and application cache to store offline data. Allows JavaScript to run in background. This is possible due to JS Web worker API Does not allow JavaScript to run in browser. in HTML5. Vector graphics is possible in HTML with the help of various technologies such as VML, Silver-light, Flash, etc. Vector graphics is additionally an integral a part of HTML5 like SVG and canvas. It does not allow drag and drop effects. It allows drag and drop effects. Not possible to draw shapes like circle, rectangle, triangle etc. HTML5 allows to draw shapes like circle, rectangle, triangle etc. It works with all old browsers. It supported by all new browser like Firefox, Mozilla, Chrome, Safari, etc. , , and tags are mandatory while writing a HTML code. These tags can be omitted while writing HTML code. Older version of HTML are less mobile-friendly. HTML5 language is more mobile-friendly. Doctype declaration is too long and complicated. Doctype declaration is quite simple and easy. Elements like nav, header were not present. New element for web structure like nav, header, footer etc. Character encoding is long and complicated. Character encoding is simple and easy. It is almost impossible to get true GeoLocation of user with the help of browser. One can track the GeoLocation of a user easily by using JS GeoLocation API. It can not handle inaccurate syntax. It is capable of handling inaccurate syntax. Being an older version , it is not fast , flexible , and efficient as compared to HTML5. It is efficient, flexible and more fast in comparison to HTML. Attributes like charset, async and ping are absent in HTML. Attributes of charset, async and ping are a part of HTML 5. Questions… ?