Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to HTML CSC 102 Lecture 5.

Published byReynard Wheeler Modified over 6 years ago

Similar presentations

Presentation on theme: "Introduction to HTML CSC 102 Lecture 5."— Presentation transcript:

1 Introduction to HTML CSC 102 Lecture 5

2 History Year Version 1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML 1993 Dave Raggett drafted HTML+ 1995 HTML Working Group defined HTML 2.0 1997 W3C Recommendation: HTML 3.2 1999 W3C Recommendation: HTML 4.01 2000 W3C Recommendation: XHTML 1.0 2008 WHATWG HTML5 First Public Draft 2012 WHATWG HTML5 Living Standard 2014 W3C Recommendation: HTML5 2016 W3C Candidate Recommendation: HTML 5.1

3 Markup Take a look at a web page.
What aspects of the appearance are not specified by the text itself? How does the browser know about them? Meaning and appearance of parts of a page is specified by markup

4 Tags Markup tags inserted into text
Not displayed verbatim by browser Instead used as indication of how to display Tags enclosed by angle brackets: <tag> Opening and closing tags surround content: <p>This is surrounded by paragraph tags</p> Note forward slash for the closing tag All tags must be closed. Some self-close: <hr /> Tags must nest like onion skins Learn tags by example

5 Sample HTML <html> <head> <title>Appears in Menu Bar</title> </head> <body> <p>This is the content.</p> </body> </html> Demo with simpletext

6 The <html> tag encloses the entire document
Sample HTML <html> <head> <title>Appears in Menu Bar</title> </head> <body> <p>This is the content.</p> </body> </html> The <html> tag encloses the entire document Demo with simpletext

7 The <head> tag encloses metainformation
Sample HTML <html> <head> <title>Appears in Menu Bar</title> </head> <body> <p>This is the content.</p> </body> </html> The <head> tag encloses metainformation describing the page Demo with simpletext

8 The <body> tag encloses all the actual page content
Sample HTML <html> <head> <title>Appears in Menu Bar</title> </head> <body> <p>This is the content.</p> </body> </html> The <body> tag encloses all the actual page content Demo with simpletext

9 We can add more content and tags inside.
Sample HTML <html> <head> <title>Appears in Menu Bar</title> </head> <body> <p>This is the content.</p> </body> </html> We can add more content and tags inside. Demo with simpletext

10 Browsers & HTML Browser receives HTML from the web server
Interprets tags and displays accordingly You can see the original HTML via View Source Viewing other pages’ HTML = great way to learn!

11 Dreamweaver Dreamweaver and other products offer WYSIWYG web editors
Can be useful, but be careful! You are responsible for the markup produced Use split view to see both markup & page at once Useful for: Filling in boilerplate Closing tags automatically Quickly seeing results

12 Best Practices All tags are opening/closing pair or self-matched
Tags written in lower case Prefer logical to physical tags (Why?) What something is, rather than how it should look Display preferences can be set later, in style sheet Logical tags Physical tags <em> <strong> <kbd> <acronym> <address> <blockquote> <i> <b> <u> <tt> <big> <small> <font> <blink>

13 <html xmlns="http://www.w3.org/1999/xhtml">
Tag Attributes Tag behavior may be altered by an attribute <html xmlns=" This example specifies a particular flavor of html, defined at the URL shown Attributes appear only in opening tag, not closing The style attribute governs appearance BLACK<span style="color:blue">BLUE</span> BLACK This example paints the word BLUE in blue We’ll learn other style specifications later Avoid <font> tag! (It’s deprecated.)

14 Q. Which is better for use within a web site?
Hyperlinks Links created using <a> tag Include href attribute to specify the destination Examples: <a href=" 102</a> Absolute link supplies a full URL <a href="index.html">Home Page</a> Relative link supplies only the file name Protocol, host, and folder are same as current page May also have anchor/search information Q. Which is better for use within a web site?

15 Hyperlinks and Anchors
You can also link to an anchor within a page Links and anchors both made using the <a> tag Include an href attribute for a link Include a name attribute for an anchor <a name="myAnchor">Anchor point</a> … <a href="#myAnchor">Link to anchor above</a> <a href=" to anchor in external page</a>

16 <img src="myPhoto.jpg" alt="My portrait" />
Images Image inserted using <img> tag Include src attribute referencing separate file Include alt attribute describing the image <img src="myPhoto.jpg" alt="My portrait" /> Browser loads image file separately & combines display Optional attributes for more control: Setting dimensions: style="height: 180px" Can also set width, use units like in, cm, pt, etc. Careful not to change aspect! Floating: style="float: right"

17 Try making your own web page!
Lab Activity Try making your own web page!

Download ppt "Introduction to HTML CSC 102 Lecture 5."

Similar presentations

Introduction to HTML & CSS

Introduction to HTML & CSS
WeB application development

WeB application development
Website Design.

Website Design.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
HTML – A Brief introduction Title of page This is my first homepage. This text is bold  The first tag in your HTML document is. This tag tells your browser.

HTML – A Brief introduction Title of page This is my first homepage. This text is bold  The first tag in your HTML document is. This tag tells your browser.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.

CM143 - Web Week 2 Basic HTML. Links and Image Tags.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.

 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
MGMT 230 Lab 1 HTML Basics. 2 HTML Tags An HTML document contains both document content and tags. The tags are the HTML codes inserted in a document to.

MGMT 230 Lab 1 HTML Basics. 2 HTML Tags An HTML document contains both document content and tags. The tags are the HTML codes inserted in a document to.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
HTML (HyperText Markup Language)

HTML (HyperText Markup Language)
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 

Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
HTML INTRODUCTION, EDITORS, BASIC, ELEMENTS, ATTRIBUTES.

HTML INTRODUCTION, EDITORS, BASIC, ELEMENTS, ATTRIBUTES.
Introduction to CS520/CS596_026 Lecture One Gordon Tian 408-668-5680 Fall 2015.

Introduction to CS520/CS596_026 Lecture One Gordon Tian Fall 2015.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.

Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 

Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
 2008 Pearson Education, Inc. All rights reserved. 1 4 4 Introduction to XHTML.

 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.

Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.
What is Markup and Markup Languages? What is HTML? A Basic HTML Document Basic HTML Tags Tag Attributes and Text Formatting Tags Insert Hyperlinks Add.

What is Markup and Markup Languages? What is HTML? A Basic HTML Document Basic HTML Tags Tag Attributes and Text Formatting Tags Insert Hyperlinks Add.
INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,

INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,
CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad GM-IT CIIT Islamabad CIIT Virtual Campus, CIIT COMSATS Institute.

CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad GM-IT CIIT Islamabad CIIT Virtual Campus, CIIT COMSATS Institute.

Similar presentations

Ads by Google