INT222 – Internet Fundamentals

Slides:



Advertisements
Similar presentations
HTML popo.
Advertisements

HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.
Web Development & Design Foundations with XHTML
HTML: HyperText Markup Language Hello World Welcome to the world!
HTML/XML XHTML Authoring. Creating Tables  Table: An arrangement of horizontal rows and vertical columns. The intersection of a row and a column is called.
CS134 Web Design & Development Attributes, Lists, Tables, Links, and Images Mehmud Abliz.
17/10/11. 2  The form element ( ) is used to include a number of form elements together so that they can be referenced by some other code in order to.
HTML and XHTML Controlling the Display Of Web Content.
Markup Languages Controlling the Display Of Web Content.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Week 1 8/10/2015iSTTS, Agenda Introduction to HTML Creating and publishing a Web page Validating a document Main HTML elements Block-level HTML.
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
_ HTML, XHTML & CSS Sami Niemelä | Module 1: Introduction to digital media: Day 02.
HTML (HyperText Markup Language)
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
HTML history, Tags, Element. HTML: HyperText Markup Language Hello World Welcome to the world!
Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.
CSC 2720 Building Web Applications Hypertext Markup Language (HTML)
1 HTML intro The development of HTMLThe development of HTML The transition from HTML to XHTMLThe transition from HTML to XHTML XHTML syntax, tags, and.
CS134 Web Design & Development Creating a Basic Web Page Exerted from Mehmud Abliz slides.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
1 Web Developer Foundations: Using XHTML Chapter 2 Key Concepts.
>> Introduction to HTML: Tags. Hyper - is the opposite of linear Text – words / sentences / paragraphs Mark-up – Marking the text Language – It is a language.
XHTML. Introduction to XHTML What Is XHTML? – XHTML stands for EXtensible HyperText Markup Language – XHTML is almost identical to HTML 4.01 – XHTML is.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
A Basic Web Page. Chapter 2 Objectives HTML tags and elements Create a simple Web Page XHTML Line breaks and Paragraph divisions Basic HTML elements.
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
HTML: Hyptertext Markup Language Doman’s Sections.
XHTML 1.1  Derived from Standard Generalized Markup Language (SGML) of ISO  XHTML concerned primary with content rather than presentation and style 
XHTML1-1 Extensible HyperText Markup Language (XHTML) Part 2 Xingquan (Hill) Zhu
Introduction HTML (Hypertext Markup Language) is used to create document on the World Wide Web. HTML is not a programming language, it is a markup language.
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
Web Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML HyperText Markup Language ©Richard L. Goldman July 15, 2003.
HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Introduction to XHTML 1 Chapter 4 Introduction to XHTML: Part 1 Reference From: Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
CS134 Web Design & Development Attributes, Lists, Tables, Links, and Images Mehmud Abliz.
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom
©SoftMoore ConsultingSlide 1 Introduction to HTML: Block-Level Elements.
HTML AN INTRODUCTION TO WEB PAGE PROGRAMMING. INTRODUCTION TO HTML With HTML you can create your own Web site. HTML stands for Hyper Text Markup Language.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
HTML Basics.
Web Development & Design Foundations with HTML5 8th Edition
Marking Up with XHTML Tags describe how a web page should look
HTML: HyperText Markup Language
Elements of HTML Web Design – Sec 3-2
CGS 3066: Web Programming and Design Spring 2016
Elements of HTML Web Design – Sec 3-2
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Introduction to XHTML Cont:.
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Lesson 2: HTML5 Coding.
Marking Up with XHTML Tags describe how a web page should look
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

INT222 – Internet Fundamentals Week 3: Introduction to HTML

Outline Document structure/overview Important elements and using them

What is HTML HTML (HyperText Markup Language) is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page. Hypertext is text with hyperlinks. The markup tells the Web browser how to display a Web page's words and images for the user. The markup indicators are often called “tags”, which are enclosed in angle brackets e.g. <h1>. Most html tags come in pairs - e.g. <h1> and </h1> <h1> being the opening of the tag and </h1> being the closing of the tag. In between these tags you can add text-based content. There are some tags that are not paired – these tags are know as empty tags, such as <img /> <element attribute=value>Content</element>

Tags vs. Elements vs. Attributes The terms tag, element & attribute are used throughout the web site. You should note the difference between these terms. HTML elements: Html documents are defined by HTML elements , and An HTML Element is everything from the start tag to the end tag, e.g. <p>Some text</p> - is referred to as an element, including starting tag - content - ending tag <p> and </p> - are referred to as tags.

Tags vs. Elements vs. Attributes <p class="....">Some text</p> class is an attribute An attribute is used to define the characteristics of an element, and it is placed inside the opening tag. All attribute are made up 2 parts: a name and a value. Core / Global attributes: id, title, class, style

HTML Tags/Element Categories HTML tags are classified in three different categories: Block-level: A block-level tag is a tag that creates large blocks of content like tables (<table>) or page divisions (<div>). e.g. <p>, <h1>, <ul>, <hr>, <dl>, … They start new lines of text when you use them, and They can contain other block tags as well as inline tags and text.

HTML Tags/Element Categories Inline-level An inline tag is a tag that defines the text or data in the document like STRONG(<strong>) makes the enclosed text strongly emphasized. e.g. <span>, <a>, <img>, <td>, <b>, <em>, <input>, … Inline tags don't start new lines when they are used, and they generally only contain other inline tags and text or data.

HTML Tags/Element Categories Empty Empty tags do not have closing tags or they are not paired. An empty tag does not contain any text/content. Empty tags are simply used as markers. In some cases empty tags are used for whatever is contained in their attributes. The <br />, <img />, <input />, <meta /> tags are a few examples of empty tags.

Document Type Definition (DTD) A document type definition (DTD) is a set of markup declarations that define a document type for an SGML-family markup language (SGML, XML, HTML).

Document Type Definition Example HTML Document Structure Examples - Doctype Declarations List: Basic HTML document structure Basic xHTML 1.0 Strict document structure Basic xHTML 1.0 Transitional document structure Basic xHTML 1.0 Frameset document structure Basic HTML5 document DTD: The Type. This defines the type of DOCTYPE used. A Document Type Definition (DTD) defines the legal building blocks of an XML/HTML document. It defines the document structure with a list of legal elements and attributes The DOCTYPE element is an identifier found at the very beginning of an HTML document, even before the element. DocType declares to the browser what version of (X)HTML (eg. 3.4 or 4.01, 5.0 etc.) is used in the document. DocType is not an HTML Tag.

Basic HTML document structure <head> <title>INT222</title> </head> <body> <h1>HTML Document Structure</h1> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body> </html> What if DocType is absent in HTML document? An HTML document which lacks a DOCTYPE, will be rendered in bugwards compatibility mode (Quirk Mode), since it is assumed to be an older document which was written before DOCTYPE became widely used. 2.You will not be able to use a HTML (HyperText Markup Language) Validator to check the page coding. HTML validator requires the DOCTYPE declaration. 3.The stylesheet may not be implemented as planned.

Basic xHTML 1.0 Strict document structure <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>INT222</title> </head> <body> <h2>xHTML Document Structure</h2> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body> </html> 1. HTML 4.01 Strict, which describes the structural portions of HTML 4.01 and does not provide any presentational markup or frame-related markup. HTML 4.0 Strict says you to use an Cascading Style Sheet for presentational markup (<b>, <font> etc.) and not to include these elements in HTML page. This DocType claims that the document is a strict document; that is, it is authored according to a strict adherence to the W3C specification, and uses no presentational markup (<b>, <font> etc.). Upon seeing this, IE5/Mac will kick its rendering engine into STANDARD MODE, so that your document will be displayed according to the W3C standards. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Basic xHTML 1.0 Transitional document structure <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>INT222</title> </head> <body> <h2>xHTML Document Structure</h2> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body> </html> 2. HTML 4.01 Transitional, which includes the presentational markup such as and , but does not include frame-related markup. Transitional DTD allows some older PUBLIC and attributes that have been deprecated. This declaration calls for transitional (or loose) adherence to the standards. In this case, IE5/Mac will display the document according to bugwards compatibility rules (Quirk Mode). This will bring the rendering more in line with Internet Explorer for Mac's historical behavior. Upon seeing this, IE5/Mac will kick its rendering engine into QUIRK MODE. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Basic xHTML 1.0 Frameset document structure <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>INT222</title> </head> <frameset cols="40%,60%"> <frame name="frame1" src="../int222/f1.html" /> <frame name="frame2" src="../int222/f2.html" /> </frameset> </html> 3. HTML 4.01 Frameset, which is the same as HTML 4.01 Transitional except that it adds a description of frame-related markup. If frames are used, the Frameset DTD must be used.

Basic HTML5 document <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>INT222</title> </head> <body> <h2>HTML5 Document Structure</h2> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body> </html> HTML5 DTD-less DOCTYPE HTML5 uses a DOCTYPE declaration which is very short, due to its lack of references to a Document Type Definition in the form of a URL and/or FPI. All it contains is the tag name of the root element of the document, HTML.  <!DOCTYPE HTML>

HTML5 document structure <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Try it</title> </head> <body> <header> <h1>HTML5 Document Structure</h1> </header> <nav> <ul> <li><a href="https://scs.senecac.on.ca">ICT</a></li> <li><a href="http://www.senecac.on.ca">Seneca College</a></li> </ul> </nav> <article> <section> <p>An article can have multiple sections</p> </section> </article> <aside> <p>This is aside part of the web page</p> </aside> <footer> <p>This is the footer</p> </footer> </body> </html>

Basic HTML Document Presentation Basic HTML document (browser default) Basic HTML document (No browser default) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>INT222</title> <link rel="stylesheet" href="reset.css" type="text/css" media="screen" /> </head> <body> <h1>Heading - the h1 tag</h1> <h2>Heading - the h2 tag</h2> <p>This is a paragraph - the p tag</p> <p>Unolrdered list</p> <ul> <li>item 1</li> <li>item 2</li> </ul> <table> <tr> <th>Column heading 1</th> <th>Column heading 2</th> </tr> <td>Item 1</td> <td>Item 2</td> </table> </body> </html>

Recommended list of Doctype declarations World Wide Web Consortium (W3C) Doctype declarations HTML5 specification

Why html then xhtml and now html5? The history of HTML: http://www.rackspace.com/blog/internet-history-html-evolution/

Basic HTML Tags html tag Description <!DOCTYPE> Specifies the document type <html> Specifies an html document <head> Specifies information about the document <title> Specifies the document title <meta> Specifies meta information <link> Specifies a resource reference <script> Specifies a script <style> Specifies a style definition <body> Specifies the body element <!--...--> Specifies a comment

HTML Heading Tags Headings Headings with reset Heading tags Description Example <h1> Specifies a heading level 1 <h1>.......</h1> <h2>.......</h2> <h3>.......</h3> <h4>.......</h4> <h5>.......</h5> <h6>.......</h6> <h2> Specifies a heading level 2 <h3> Specifies a heading level 3 <h4> Specifies a heading level 4 <h5> Specifies a heading level 5 <h6> Specifies a heading level 6 Headings       Headings with reset

p, blockquote, pre, br, hr tags Description Example <p> Specifies a paragraph <p>.......</p> <blockquote>.......</blockquote> <pre>.......</pre> <br /> <hr /> <mark> <blockquote> Specifies a long quotation <pre> Specifies preformatted text <br />, <br> Inserts a single line break <hr />, <hr> Specifies a horizontal rule Highlight parts of a text Paragraphs & more

Presentation Tags Tags Description Example Equivalent CSS <b> Specifies bold text <b>.......</b> .bold { font-weight:bold; } <em> Specifies emphasized text <em>.......</em> .italic { font-style:italic; } <i> Specifies italic text <i>.......</i> <u> Specifies text to be underlined <u>.......</u> .under { text-decoration:underline; } <sup> Specifies superscripted text <sup>.......</sup> .superscript { font-size:small; vertical-align:top;} <sub> Specifies subscripted text <sub>.......</sub> .subscript { font-size:xx-small; vertical-align:bottom;} Presentation tags -1- Presentation tags -2- * use CSS instead

HTML List Tags Three types of list tags in HTML: Unordered lists Definition lists

Unordered lists The <ul> tag displays an unordered bulleted list. You can use CSS (list-style-type property) to control the bullet style. The <li> tag is used to designate the individual list items in the list. Both the <ul> and the <li> require a closing tag (</ul> and </li>). Tags Description Example <ul> Specifies an unordered list <li> ...... </li> </ul> <li> Specifies a list item ul {list-style-type: none;}

Ordered lists The <ol> tag displays an ordered list. You can use CSS (list-style-type property) to control the sequence style. The <li> tag is used to designate the individual list items in the list. Both the <ol> and the <li> require a closing tag (</ol> and </li>). Tags Description Example <ol> Specifies an ordered list <li> ...... </li> </ol> <li> Specifies a list item

Definition lists The <dl> encloses a definition list. A definition list contains terms, which are defined with the <dt> tag, and descriptions, which are defined with the <dd> tag. The <dl>, <dt> and the <dd> require a closing tag (</dl>, <dt> and </dd>). By default, a browser will align terms on the left and indents each definition on a new line. The intent of a definition list is to display lists of terms and their corresponding descriptions, such as in a glossary.

Definition lists Tags Description Example <dl> Specifies a definition list <dt> ...... </dt> <dd> ...... </dd> </dl> <dt> Specifies a definition term <dd> Specifies a definition description

Nested lists Ordered lists and Unordered lists can be nested - a combination of the two can also be nested. Each level will indented. Nested lists may look complicated however you just need remember the basic structure for ordered and unordered lists. Example <ol> <li> ...... </li> <li> ...... <ul> </ul></li> </ol> This is a Nested list list item one sub for item one list item two list item three

Hyperlinks & Anchor The HTML <a> Element (or the HTML Anchor Element) defines a hyperlink, the named target destination for a hyperlink, or both. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document or another part of the same document. Basic HTML link (anchor) format: <a href="URL.................">text</a>

Hyperlinks Absolute link Relative link <a href="https://scs.senecac.on.ca/~facultyname">John Doe's Website</a> Relative link The links should be relative to the location of the current document. e.g. <a href="xxxxx.html">Text...text</a> <a href="../xxxxx.html">Text...text</a> <a href="info/xxxxx.html">Text...text</a>

Hyperlinks Link to a particular section of an html page To link to a specific section (int222) of a page named (xxxxx.html), it is assumed that somewhere in (xxxxx.html) the following code is available: <a id="int222"></a> Then use an hyperlinks to link to it: <a href="xxxxx.html#int222">Text...text</a> e.g. The link here is a absolute link to an HTML document: <a href=" https://zenit.senecac.on.ca/~emile.ohan/int222/examples/anchor/href-relative.html#tests "> and links to the “tests” id

Hyperlinks Link to a particular section in current page To link to a specific section (top) in the current html, it is assumed that somewhere in current html document the following code is available <a id="top"></a> <a href="#top">Top</a>

Hyperlinks E-mail link Image link Target link - Not recommended <a href="mailto:demo@myseneca.on.ca">Text ...text</a> Image link <a href="xxxxx.html"> <img src="action.gif" alt="Text..." /> </a> Target link - Not recommended <a href="xxxxx.html" target="window_name"> Text...text</a>

Basic table tags Tag Description Example <table> Specifies a table <caption>.......</caption> <tr> <th>.......</th> </tr> <td>.......</td> </table> <caption> Specifies a table caption Specifies a table row <th> Specifies a table header <td> Specifies a table cell / detail

Table Elements’ Attributes A lot of these attributes have been declared as being obsolete features in HTML5. We need to use CSS instead border - applies to the table tag width - applies to the table, td, th tags cellspacing - applies to the table tag cellpadding - applies to the table tag colspan - applies to the td, th tags rowspan - applies to the td, th tags align - applies to the table, caption, tr, td, th tags valign - applies to the tr, td, th tags Nested tables

Introduction to HTML (MDN) https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction HTML element reference (MDN) https://developer.mozilla.org/en-US/docs/Web/HTML/Element HTML attribute reference https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes Basic Structure of an HTML5 Document http://www.coreservlets.com/html5-tutorial/basic-html5-document.html#

Thank You!