Lecture 02 - HTML -1.pdf
Document Details
Uploaded by DecisiveAlbuquerque3484
Rajarata University of Sri Lanka
2023
Tags
Full Transcript
CIT112 – Web Technologies Lecture 02 – Client Side Web Technologies :HTML Part 1 Harshapriya Rajakaruna MSc (reading), BSc (Hons)(Special) in IT, BSc (General) in Applied Sciences (Computer Science/Mathematics), CCNA...
CIT112 – Web Technologies Lecture 02 – Client Side Web Technologies :HTML Part 1 Harshapriya Rajakaruna MSc (reading), BSc (Hons)(Special) in IT, BSc (General) in Applied Sciences (Computer Science/Mathematics), CCNA Network Manager, IT Center, Rajarata University of Sri Lanka 2023 © SLTC Research University 2 Content Getting Started.. What is HTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags 3 2023 © SLTC Research University Getting Started.. WWW -World Wide Web. HTML - HyperText Markup Language The language of Web Pages on the World Wide Web. HTML is a text formatting language. URL - Uniform Resource Locator. Browser - A software program which is used to show web pages. 4 2023 © SLTC Research University How the Web Works? WWW use classical client / server architecture HTTP is text-based request-response protocol HTTP Page request HTTP Server response Server running Client running a Web Server Web Browser Software (IIS, Apache, etc.) 5 2023 © SLTC Research University What is a Web Page? Web pages are text files containing HTML HTML – Hyper Text Markup Language A notation for describing document structure (semantic markup) formatting (presentation markup) The markup tags provide information about the page content structure 6 2023 © SLTC Research University What is HTML? HTML allows you to describe the content of a website. Headers Paragraphs Images Hyperlinks HTML also allows you to specify relationships between elements and group them. 2023 © SLTC Research University Preface It is important to have the correct vision and attitude towards HTML HTML is only about structure, not appearance Browsers tolerate invalid HTML code and parse errors – you should not Always think about semantics 8 2023 © SLTC Research University The Declaration The declaration represents the document type, and helps browser to display web page correctly. It must only appear once, at the top of the page (before any HTML Tags) The declaration is not case sensitive The declaration for HTML5 9 2023 © SLTC Research University HTML Versions Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HYTML 4.01 1999 XHTML 2000 HTML5 2014 10 2023 © SLTC Research University HTML vs. XHTML XHTML is more strict than HTML Tags and attribute names must be in lowercase All tags must be closed (, ) while HTML allows and and implies missing closing tags (par1 par2) XHTML allows only one root element (HTML allows more than one) 2023 © SLTC Research University XHTML vs. HTML (2) Many element attributes are deprecated in XHTML, most are moved to CSS Attribute minimization is forbidden, e.g. Note: Web browsers load XHTML faster than HTML and valid code faster than invalid! 2023 © SLTC Research University Creating HTML Pages An HTML file must have an.htm or.html file extension HTML files can be created with text editors: NotePad, NotePad ++ Or HTML editors (WYSIWYG Editors): Microsoft FrontPage Macromedia Dreamweaver Netscape Composer Microsoft Word Visual Studio Code 2023 © SLTC Research University Choosing Text Editor There are many different programs that you can use to create web documents. HTML Editors enable users to create documents quickly and easily by pushing a few buttons. Instead of entering all of the HTML codes by hand. These programs will generate the HTML Source Code for you. HTML Editors are excellent tools for experienced web developers; however; it is important that you learn and understand the HTML language so that you can edit code and fix “bugs” in your pages. For this Course, we will focus on using the Visual Studio Code. 14 2023 © SLTC Research University Getting Start.. Make a.html file using a text editor(even Notepad can do it) Open it with your browser. Usually, your default browser is already configured to open.html files. 2023 © SLTC Research University HTML Structure HTML is comprised of “elements” and “tags” Begins with and ends with Elements (tags) are nested one inside another: Tags have attributes: HTML describes structure using two main sections: and 2023 © SLTC Research University Basic HTML Document Structure Your Page Title This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded. 2023 © SLTC Research University HTML Syntax HTML syntax: Closing tag two-sided tag: document content Properties of the Actual content appears in Starting tag. webpage. It could be empty tag Optional! Examples: CGS 2100 UCF 2023 © SLTC Research University Tags Codes enclosed in brackets Usually paired E.g. My Web Page Not case sensitive E.g. = = 19 2023 © SLTC Research University First HTML Page test.html My First HTML Page This is some text... 2023 © SLTC Research University First HTML Page: Tags Opening tag My First HTML Page Closing This is some text... tag An HTML element consists of an opening tag, a closing tag and the content inside. 2023 © SLTC Research University First HTML Page: Header HTML header My First HTML Page This is some text... 2023 © SLTC Research University First HTML Page: Body My First HTML Page This is some text... HTML body 2023 © SLTC Research University 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. 2023 © SLTC Research University Section: tag Title should be placed between and tags Telerik Academy – Winter Season 2009/2010 Used to specify a title in the window title bar Search engines and people rely on titles 2023 © SLTC Research University 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. 26 2023 © SLTC Research University 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 27 2023 © SLTC Research University 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 link Background vlink text alink 28 2023 © SLTC Research University 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. 29 2023 © SLTC Research University 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. 30 2023 © SLTC Research University 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. 31 2023 © SLTC Research University LINK, VLINK, and ALINK These attributes control the colors of the different link states: 1. LINK – initial appearance – default = Blue. 2. VLINK – visited link – default = Purple. 3. ALINK – active link being clicked – default = Yellow. The Format for setting these attributes is: Document's content. 32 2023 © SLTC Research University Headings, Paragraphs, Breaks & Horizontal Rules In this section you will add headings to your page, insert paragraphs, add some breaks, and add horizontal rules. Objectives Upon completing this section, you should be able to 1. List and describe the different Heading elements. 2. Use Paragraphs to add text to a document. 3. Insert breaks where necessary. 4. Add a Horizontal Rule. 33 2023 © SLTC Research University Headings, Inside the BODY element, heading elements H1 through H6 are generally used for major divisions of the document. Headings are permitted to appear in any order, but you will obtain the best results when your documents are displayed in a browser if you follow these guidelines: 1. H1: should be used as the highest level of heading, H2 as the next highest, and so forth. 2. You should not skip heading levels: e.g., an H3 should not appear after an H1, unless there is an H2 between them. 34 2023 © SLTC Research University Headings, Example Page Heading 1 Heading 1 Heading 2 Heading 2 Heading 3 Heading 3 Heading 4 Heading 4 Heading 5 Heading 5 Heading 6 Heading 6 35 2023 © SLTC Research University Paragraphs, Paragraphs allow you to add text to a document in such a way that it will automatically adjust the end of line to suite the window size of the browser in which it is being displayed. Each line of text will stretch the entire length of the window. 36 2023 © SLTC Research University Paragraph tags... CGS 2100 Here is the first paragraph. Here is the second paragraph. 2023 © SLTC Research University Result First paragraph Space between paragraphs Second paragraph 2023 © SLTC Research University Break, Line breaks allow you to decide where the text will break on a line or continue to the end of the window. A is an empty Element, meaning that it may contain attributes but it does not contain content. The element does not have a closing tag. 39 2023 © SLTC Research University Break, Example Page Heading 1 Paragraph 1,…. Heading 1 Line 2 Paragraph 1, Line 3 Line 2 Line 3 …. …. 40 2023 © SLTC Research University Horizontal Rule, The element causes the browser to display a horizontal line (rule) in your document. does not use a closing tag,. 41 2023 © SLTC Research University Horizontal Rule, Attribute Description Default Value Height of the rule in SIZE 2 pixels pixels Width of the rule in WIDTH pixels or percentage 100% of screen width Draw the rule with a Not set NOSHADE flat look instead of a 3D look (3D look) Aligns the line (Left, ALIGN Center Center, Right) Sets a color for the COLOR Not set rule (IE 3.0 or later) 42 2023 © SLTC Research University Horizontal Rule, Example Page Heading 1 Paragraph 1,…. Heading 1 Paragraph 1, Line 2 Line 2 ______________________ Line 3 _____ Line 3 43 2023 © SLTC Research University Character Formatting In this section you will learn how to enhance your page with Bold, Italics, and other character formatting options. Objectives Upon completing this section, you should be able to 1. Change the color and size of your text. 2. Use Common Character Formatting Elements. 3. Align your text. 4. Add special characters. 5. Use other character formatting elements. 44 2023 © SLTC Research University Bold, Italic and other Character Formatting Elements Two sizes bigger The size attribute can be set as an absolute value from 1 to 7 or as a relative value using the “+” or “-” sign. Normal text size is 3 (from -2 to +4). Bold Italic Underline Color = “#RRGGBB” The COLOR attribute of the FONT element. E.g., this text has color Preformatted Text enclosed by PRE tags is displayed in a mono-spaced font. Spaces and line breaks are supported without additional elements or special characters. 45 2023 © SLTC Research University Bold, Italic and other Character Formatting Elements Emphasis Browsers usually display this as italics. STRONG Browsers display this as bold. TELETYPE Text is displayed in a mono-spaced font. A typewriter text, e.g. fixed-width font. Citation represents a document citation (italics). For titles of books, films, etc. Typically displayed in italics. (A Beginner's Guide to HTML) 46 2023 © SLTC Research University Text Formatting Text formatting tags modify the text between the opening tag and the closing tag Ex. Hello makes “Hello” bold bold italicized underlined Samplesuperscript Samplesubscript strong emphasized Preformatted text Quoted text block Deleted text – strike through 2023 © SLTC Research University 47 Bold, Italic and other Character Formatting Elements One Size Larger - Normal One Size Larger - Normal – One – Size Smaller One Size Bold - italics - Underlined - Smaller Colored Emphasized - Strong - Tele Bold - italics - Type Underlined - Colored Emphasized - Strong - Tele Type 48 2023 © SLTC Research University Alignment Some elements have attributes for alignment (ALIGN) e.g. Headings, Paragraphs and Horizontal Rules. The Three alignment values are : LEFT, RIGHT, CENTER. Will center elements. 49 2023 © SLTC Research University Alignment Represents a division in the document and can contain most other element type. The alignment attribute of the DIV element is well supported. Inside a TABLE, alignment can be set for each individual cell. 50 2023 © SLTC Research University Special Characters & Symbols These Characters are recognized in HTML as they begin with an ampersand and end with with a semi-colon e.g. &value; The value will either be an entity name or a standard ASCII character number. They are called escape sequences. The next table represents some of the more commonly used special characters. For a comprehensive listing, visit the W3C’s section on special characters at: http://www.w3.org/MarkUp/HTMLPlus/htmlplus_13.html 51 2023 © SLTC Research University HTML Special Characters Symbol Name HTML Entity Symbol Copyright Sign © © Registered Trademark Sign ® ® Trademark Sign ™ ™ Less Than < < Greater Than > > Ampersand & & Non-breaking Space Em Dash — — Quotation Mark " " Euro € € British Pound £ £ Japanese Yen ¥ ¥ 2023 © SLTC Research University Special Characters – Example [>> Welcome <<] ►I have following cards: A♣, K♦ and 9♥. ►I prefer hard rock ♫ music ♫ © 2006 by Svetlin Nakov & his team Telerik Academy™ 2023 © SLTC Research University Special Chars – Example (2) [>> Welcome special-chars.html <<] ►I have following cards: A♣, K♦ and 9♥. ►I prefer hard rock ♫ music ♫ © 2006 by Svetlin Nakov & his team Telerik Academy™ 2023 © SLTC Research University Additional Character Formatting Elements strike-through text DEL is used for STRIKE at the latest browsers places text in a big font places text in a small font places text in subscript position places text in superscript style position 55 2023 © SLTC Research University Example strike-through text places text in a big font places text in a small font Y 2 X 3 56 2023 © SLTC Research University References https://www.w3schools.com 2023 © SLTC Research University 2023 © SLTC Research University
