Learning HTML involves... Learning a list of elements Learning how these elements are used Explain: Learning HTML means learning all of the elements.

Slides:



Advertisements
Similar presentations
HTML popo.
Advertisements

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Unit 3 Day 4 FOCS – Web Design. No Journal Entry.
HTML: HyperText Markup Language Hello World Welcome to the world!
Hypertext markup language.  Client asks for an html file  Server returns the html file  Client parses and displays it  This display is what most people.
ASHIMA KALRA.  WHAT IS HTML WHAT IS HTML  HTML TAGS HTML TAGS  FORMATTING TAGS FORMATTING TAGS.
HTML Semantic Structure
Semantically meaningful elements Elements that are self-descriptive; they describe the purpose of the content they contain Examples: – element defines.
The basic structure of any HTML The basic structure of any HTML page is: Your web page title here ** [all the HTML for display] ** : : CENG 449 Lecture.
XHTML1 Building Document Structure. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML) documents.
HTML BASIC
HTML Notes Chapters 1--6 Codes used in creating HTML documents are called tags. Tags are always enclosed in left ( ) angle brackets. Tags can be upper.
Creating a Simple Page: HTML Overview
HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
Define html document byusing Example : Title of the document The content of the document......
Headings, Paragraphs, Formatting, Links, Head, CSS, Images
HTML Essentials Markup ( Part I ). Why Markup ? Markup gives meaning and structure to your web page Creates a relationship between the elements.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
HTML history, Tags, Element. HTML: HyperText Markup Language Hello World Welcome to the world!
XHTML1 Building Document Structure Chapter 2. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML)
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
1.  Describe the anatomy of a web page  Format the body of a web page with block-level elements including headings, paragraphs, lists, and blockquotes.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
HTML Tags Basic Tags Doctype or HTML Head Title Body Use the website to find the definitions
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.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
Learning HTML involves... Learning how these elements are used Learning a list of elements.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
CPT 499 Internet Skills for Educators Session Ten Class Notes.
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.
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.
Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.
Text Building a Website Lesson 3. Headings,,,,, Headings,,,,, HTML has 6 levels of headings,,,,,,,,,, is used for main headings is used for main headings.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
01 – HTML (1) Informatics Department Parahyangan Catholic University.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
HTML Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
Q.Nand1 HTML Creating an HTML Document Lesson 2. Q.Nand2 Overview Creating an HTML Document: –HTML syntax –Creating Basic Tags –Displaying Your HTML Files.
Lesson 4 Basic Text Formatting. Objectives ● I ● In this tutorial we will: ● Introduce Wiki Syntax ● Learn how to Bold and Italicise text, and add Headings.
HTML Markup for Accessibility You Never Knew About David Epler June 27, 2004.
Lab 3 Html basics.
Intro to HTML CS 1150 Spring 2017.
More HTML Tags CS 1150 Spring 2017.
HTML Basics.
HTML TEXT.
Intro to HTML CS 1150 Fall 2016.
More HTML Tags CS 1150 Fall 2016.
HTML: HyperText Markup Language
Elements of HTML Web Design – Sec 3-2
HTML5 – Heading, Paragraph
Cascading Style Sheets (CSS)
Text Elements.
Introduction to Computing
Elements of HTML Web Design – Sec 3-2
Internet & Web Engineering Course Code:CS-228 Credit Hours (3+1) Lab 1 Introduction to Markup Language HTML Instructor: Muhammad Zeeshan Haider.
WEBSITE DESIGN Chp 1
Text Elements.
HTML Intro.
Text Elements.
HOW PAGES USE STRUCTURE HEADLINE HOW PAGES USE STRUCTURE TEXT.
HTML Formatting Text.
Text Elements.
HOW PAGES USE STRUCTURE HEADLINE HOW PAGES USE STRUCTURE TEXT.
Digging in a little deeper
WJEC GCSE Computer Science
Text Elements.
Web Design & Development
Getting Started with HTML
Presentation transcript:

Learning HTML involves...

Learning a list of elements Learning how these elements are used Explain: Learning HTML means learning all of the elements that you can use.

Creating a page involves adding tags to content TAGS DESCRIBE CONTENT Creating a page involves adding tags to content

These tags are known as "markup" TAGS DESCRIBE CONTENT Explain: Tags are referred to as "markup". These tags are known as "markup"

There are two types of markup...

STRUCTURAL SEMANTIC

HEADINGS <h1>This is a Main Heading</h1> <h2>This is a level 2 heading</h2> <h3>This is a level 3 heading</h3> <h4>This is a level 4 heading</h4> <h5>This is a level 5 heading</h5> <h6>This is a level 6 heading</h6> Explain: There are six levels of heading. <h1> is shown the largest and <h6> is shown the smallest. The "h" in the tag name stands for the word "heading".

PARAGRAPHS <p>A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line.</p> <p>Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading will be one or more paragraphs.</p> Explain: The <p> tag is used for paragraphs of text. You now have basic structure of headings and paragraphs of text. This is another example of how the letters in the tags describe the purpose of the tag. That is, the "p" in this tag stands for the word "paragraph".

BOLD & ITALIC <p>This is how we make a word appear <b>bold</b>.</p> <p>This is how we make a word appear <i>italic</i>.</p> Please note: The <strong> and <em> tags are described in a later section talking about semantic markup. It can be confusing to introduce this too early as beginners are more familiar with concepts of bold and italic.

BOLD & ITALIC <p>This is how we make a word appear <b>bold</b>.</p> <p>This is how we make a word appear <i>italic</i>.</p>

BOLD & ITALIC <p>This is how we make a word appear <b>bold</b>.</p> <p>This is how we make a word appear <i>italic</i>.</p>

SUPERSCRIPT & SUBSCRIPT <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p> <p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in 2009<sub>1</sub>.</p>

SUPERSCRIPT & SUBSCRIPT <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p> <p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in 2009<sub>1</sub>.</p>

SUPERSCRIPT & SUBSCRIPT <p>On the 4<sup>th</sup> September you will learn about E=MC<sup>2</sup>.</p> <p>The amount of C0<sub>2</sub> in the atmosphere grew by 2ppm in 2009<sub>1</sub>.</p>

WHITESPACE IS COLLAPSED <p>The moon is drifting away from the earth.</p> Explain: Multiple spaces get collapsed into a single space. (As students will see later, this allows you to add space into code to make it more readable.)

LINE BREAKS <p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p> Explain: This tag is not to be used to separate paragraphs. That is what the <p> element is for.

LINE BREAKS <p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>

HORIZONTAL RULES <p>Venus is the only plant that rotates clockwise</p> <hr /> <p>Jupiter is bigger than all the other planets combined.</p>

HORIZONTAL RULES <p>Venus is the only plant that rotates clockwise</p> <hr /> <p>Jupiter is bigger than all the other planets combined.</p>

VISUAL EDITORS & THEIR CODE VIEWS Explain: This is a WYSIWYG editor. WYSIWYG stands for "What You See Is What You Get". These are commonly used in content management systems and blogging tools.

VISUAL EDITORS & THEIR CODE VIEWS Explain: There is often an HTML editor that sits alongside the WYSIWIG editor, so you can edit the source code directly.

SEMANTIC MARKUP WHAT IS IT? WHY USE IT? APPLICATION Set of elements, for example: The <em> tag adds emphasis <blockquote> contains a quote Provides extra information about your content Do NOT use it to alter presentation of those elements Screen readers can add emphasis to words in <em> Search engines can find quotations in <blockquote> Explain: Some elements add semantic information about the document. Click: What is semantic markup? Click: Why use semantic markup (note not to be used just for visual effect) Click: Examples of how this markup could be used

STRONG & EMPHASIS <p><strong>Beware</strong> pickpockets operate in this area.</p> <p>I <em>think</em> Ivy was the first.</p> <p>I think <em>Ivy</em> was the first.</p> <p>I think Ivy was the <em>first</em>.</p>

STRONG & EMPHASIS <p><strong>Beware</strong> pickpockets operate in this area.</p> <p>I <em>think</em> Ivy was the first.</p> <p>I think <em>Ivy</em> was the first.</p> <p>I think Ivy was the <em>first</em>.</p>

STRONG & EMPHASIS <p><strong>Beware</strong> pickpockets operate in this area.</p> <p>I <em>think</em> Ivy was the first.</p> <p>I think <em>Ivy</em> was the first.</p> <p>I think Ivy was the <em>first</em>.</p> Suggestion: Read the emphasis out. This will help students understand how emphasis is added in different places to change meaning. Note: Screen readers can add appropriate emphasis to voicing to help convey meaning. Tip: Saying the sentence out loud helps you determine whether use of these elements is appropriate or not.

STRONG & EMPHASIS <p><strong>Beware</strong> pickpockets operate in this area.</p> <p>I <em>think</em> Ivy was the first.</p> <p>I think <em>Ivy</em> was the first.</p> <p>I think Ivy was the <em>first</em>.</p>

STRONG & EMPHASIS <p><strong>Beware</strong> pickpockets operate in this area.</p> <p>I <em>think</em> Ivy was the first.</p> <p>I think <em>Ivy</em> was the first.</p> <p>I think Ivy was the <em>first</em>.</p>

QUOTATIONS <blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p> </blockquote> <p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

QUOTATIONS <blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p> </blockquote> <p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

QUOTATIONS <blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p> </blockquote> <p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

QUOTATIONS <blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh"> <p>Did you ever stop to think, and forget to start again?</p> </blockquote> <p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>

ABBREVIATIONS & ACRONYMS <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p> <p><acronym title="National Aeronautics and Space Administration">NASA</acronym> do some crazy space stuff.</p>

ABBREVIATIONS & ACRONYMS <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p> <p><acronym title="National Aeronautics and Space Administration">NASA</acronym> do some crazy space stuff.</p>

ABBREVIATIONS & ACRONYMS <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p> <p><acronym title="National Aeronautics and Space Administration">NASA</acronym> do some crazy space stuff.</p> Note: The <acronym> tag has been dropped from HTML5 (which just uses <abbr>).

CITATIONS & DEFINITIONS <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p> <p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

CITATIONS & DEFINITIONS <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p> <p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

CITATIONS & DEFINITIONS <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p> <p>A <dfn>black hole</dfn> is a region of space from which nothing, note even light, can escape.</p>

AUTHOR DETAILS <address> <p><a href="homer@example.org"> homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p> </address> Note: This tag is for the author of a given web page only, not for general address details. (For those, coders may use microformats.)

AUTHOR DETAILS <address> <p><a href="homer@example.org"> homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p> </address>

CHANGES TO CONTENT <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p> <p>Laptop computer:</p> <p><s>Was $995</s></p> <p>Now only $375</p> Explain: None of these tags are to be used just for visual effect. CSS offers that option. Note: There was a <u> element in older versions of HTML.

CHANGES TO CONTENT <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p> <p>Laptop computer:</p> <p><s>Was $995</s></p> <p>Now only $375</p>

CHANGES TO CONTENT <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p> <p>Laptop computer:</p> <p><s>Was $995</s></p> <p>Now only $375</p>

CHANGES TO CONTENT <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p> <p>Laptop computer:</p> <p><s>Was $995</s></p> <p>Now only $375</p> Explain: This tag is not really for content that was supposed to be deleted.

SUMMARY HTML elements are used to describe the structure of the page (e.g. headings, subheadings, paragraphs). Clicks: Load individual bullets

SUMMARY They also provide semantic information (e.g. where emphasis is placed, definitions of acronyms, when text is a quotation). Clicks: Load individual bullets