HTML and CSS Fundamentals for Web Design
undefined
Tutorial 1
Using HTML to Create Web Pages
Objectives 1.1
•
Explore the history of the Internet and the
World Wide Web
•
Study the differences between HTML, XHTML,
and CSS
•
Create a Web page with basic HTML tags
•
Apply formatting tags to affect text on a Web
page
2
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Objectives 1.2
•
Understand image files and file types
•
Add an image to a Web page
•
Create ordered, unordered, and description
lists
•
Create nested lists
•
Validate a Web page
3
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Learning About the Internet and the
World Wide Web
•
The
Internet
is a global
internetwork
that
includes communication technologies such as
email, file transfers, and other data transfers.
•
The
World Wide Web
(simply the
Web
) is the
Internet technology that provides the ability to
download Web pages.
4
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
The Internet and the World Wide Web
•
The software used to download and view Web
pages is called a
Web
browser
.
•
Current Web browsers:
–
Microsoft Internet Explorer
–
Apple Safari
–
Google Chrome
–
Mozilla Firefox
5
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
HTML, XHTML, and CSS
•
Hypertext Markup Language (HTML)
is a set
of instructions that identify sections of a Web
page and may specify layout placement or
formatting.
•
Extensible Hypertext Markup Language
(XHTML)
is a set of rules applied to HTML to
ensure the code conforms to standards.
•
Cascading Style Sheets (CSS)
specifies
formatting and placement.
6
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Hypertext and Markup
•
Rendering
a Web page is the process of
interpreting a file that contains HTML and CSS,
and displaying the resulting Web page.
•
Hypertext
is a technology that allows you to
click a link that points to a file.
•
Markup language
is a system of codes that
describes something about the content.
•
The standards for HTML are set by the
World
Wide Web Consortium (W3C)
.
7
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Basic HTML Tags
•
Every HTML document should start with a
DOCTYPE
tag that identifies the version of
HTML used in the document.
•
HTML5 simplified that tag to the following:
<!DOCTYPE html>
8
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
The
html
,
head
, and
body
Elements
•
The
html
element is the root element of a
Web document; it is the container for all other
elements on the Web page.
•
The
head section
contains HTML code that
does not appear in the browser; it is a
container for information about the
document.
•
A head section contains
metadata
—a
document’s keywords, information about its
author, and a description of the document.
9
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
•
The
body
element is the container for all of
the page content that will be rendered in the
document window.
10
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
The
html
,
head
, and
body
Elements
Typing the Code
•
The file that contains HTML and CSS code can
be written and saved using:
–
Notepad (Microsoft Windows)
–
TextEdit (Apple OS X)
•
Elements that are contained inside other
elements are indented.
11
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Typing the Code
•
An HTML element includes an opening tag, the
text content, and the closing tag using the
following format:
<tag>
content
</tag>
•
Tags that are not paired are called empty
elements, and their format is:
<tag />
12
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Commenting Code
•
Comments can be used to identify sections of
the code.
•
The comment tag is entered as follows:
<!--
comments inserted here
-->
13
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Creating Headings
•
The
heading elements
are used to mark the
importance of content.
•
There are six heading elements:
h1
,
h2
,
h3
,
h4
,
h5
, and
h6
:
<hn>
content
</hn>
•
Font sizes can be measured in
points
(pt).
14
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Creating Headings
15
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
The Paragraph Element
•
The
paragraph element
is used to identify a
paragraph of text:
<p>
content
</p>
16
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Text Formatting Tags
•
The
strong
element
renders text in bold.
•
The
em
element
renders text in italic.
•
For applying two or more effects, nested tags
are used:
<tag1><tag2>
content
</tag2><tag1>
17
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Inserting Special Characters
•
Special characters
cannot be created by using
the keyboard.
•
A named character reference has the following
form:
&
name
;
•
A numeric character reference has the
following form:
&#
number
;
18
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Using Images on a Web Page
•
Image file formats are
GIF
,
JPEG
, and
PNG
.
•
The
image
element
is used to insert an image
on a Web page:
<img />
•
An
attribute
specifies the name of a
property
related to a Web page element and the value
for that property.
•
The image tag contains a source property:
src
src = "images/logo.jpg"
19
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Using the
img
Element
•
filename
– the filename of the image
•
alternate_text
– a description of the
image
•
widthvalue
– the width of the image in
pixels
•
heightvalue
– the height of the image in
pixels
20
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Attributes Used with Images
•
alt
– provides a brief description of the
image, and is used as a
ScreenTip
or
ToolTip
•
title
–
provides some information about
the element in which it is included
•
width
and
height
– specify the dimensions
of the area of the Web page where the image
will be rendered
21
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Attributes Used with Images
22
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Creating Lists
•
You can use HTML to create an
unordered list
(a
bulleted list), an
ordered list
(a list with numbers or
letters), and a
definition list
(a list with a hanging
indent format).
23
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Nested Lists
•
A
nested
element is an element that is inside
of another element.
•
A
sublist
is a list that is nested inside a list item
of another list.
•
The general structure of a nested list:
24
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Nested Lists
25
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Ordered List
•
An ordered list structure:
26
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
The Description List
•
A use of the
description list
is to create:
–
chronology
– list of events in time order
–
glossary
– alphabetic list of terms and definitions
•
A description list structure:
27
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
The
break
Element
28
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
The
meta
Element
•
Metadata
is data that provides information
about other data.
•
<meta name = "name of category"
content = "content data" />
29
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Validating a Completed File
•
Validation is the process of checking the file
for syntax and compliance errors.
•
Validation does not check for spelling, typos,
or grammar errors.
•
In addition to the HTML and XHTML standards,
there is also a Web Accessibility Initiative
standard.
•
There are free validators available.
30
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Validating a Completed File
31
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
•
A code validator is a Web site that provides a
mechanism to submit a code, and provides an
error report.
Validation Report
32
New Perspectives on Blended HTML and CSS Fundamentals, 3
rd
Edition
Delve into the essential concepts of HTML, XHTML, and CSS in the context of creating web pages. Learn about the Internet's history, the role of web browsers, and the significance of hypertext and markup languages. Enhance your skills by studying image files, HTML tags, formatting techniques, and more with the help of real-world examples and perspectives offered in the 3rd edition of "Blended HTML and CSS Fundamentals".
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Tutorial 1 Using HTML to Create Web Pages Blended HTML and CSS Blended HTML and CSS Fundamentals Fundamentals 3 3rd EDITION rdEDITION
Objectives 1.1 XP XP XP XP XP Explore the history of the Internet and the World Wide Web Study the differences between HTML, XHTML, and CSS Create a Web page with basic HTML tags Apply formatting tags to affect text on a Web page New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 2
Objectives 1.2 XP XP XP XP XP Understand image files and file types Add an image to a Web page Create ordered, unordered, and description lists Create nested lists Validate a Web page New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 3
Learning About the Internet and the World Wide Web The Internet is a global internetwork that includes communication technologies such as email, file transfers, and other data transfers. The World Wide Web (simply the Web) is the Internet technology that provides the ability to download Web pages. XP XP XP XP XP New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 4
The Internet and the World Wide Web XP XP XP XP XP The software used to download and view Web pages is called a Webbrowser. Current Web browsers: Microsoft Internet Explorer Apple Safari Google Chrome Mozilla Firefox New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 5
HTML, XHTML, and CSS XP XP XP XP XP Hypertext Markup Language (HTML) is a set of instructions that identify sections of a Web page and may specify layout placement or formatting. Extensible Hypertext Markup Language (XHTML) is a set of rules applied to HTML to ensure the code conforms to standards. Cascading Style Sheets (CSS) specifies formatting and placement. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 6
Hypertext and Markup XP XP XP XP XP Rendering a Web page is the process of interpreting a file that contains HTML and CSS, and displaying the resulting Web page. Hypertext is a technology that allows you to click a link that points to a file. Markup language is a system of codes that describes something about the content. The standards for HTML are set by the World Wide Web Consortium (W3C). New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 7
Basic HTML Tags XP XP XP XP XP Every HTML document should start with a DOCTYPE tag that identifies the version of HTML used in the document. HTML5 simplified that tag to the following: <!DOCTYPE html> New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 8
The html, head, and body Elements XP XP XP XP XP The html element is the root element of a Web document; it is the container for all other elements on the Web page. The head section contains HTML code that does not appear in the browser; it is a container for information about the document. A head section contains metadata a document s keywords, information about its author, and a description of the document. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 9
The html, head, and body Elements XP XP XP XP XP The body element is the container for all of the page content that will be rendered in the document window. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 10
Typing the Code XP XP XP XP XP The file that contains HTML and CSS code can be written and saved using: Notepad (Microsoft Windows) TextEdit (Apple OS X) Elements that are contained inside other elements are indented. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 11
Typing the Code XP XP XP XP XP An HTML element includes an opening tag, the text content, and the closing tag using the following format: <tag>content</tag> Tags that are not paired are called empty elements, and their format is: <tag /> New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 12
Commenting Code XP XP XP XP XP Comments can be used to identify sections of the code. The comment tag is entered as follows: <!-- comments inserted here --> New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 13
Creating Headings XP XP XP XP XP The heading elements are used to mark the importance of content. There are six heading elements: h1, h2, h3, h4, h5, and h6: <hn>content</hn> Font sizes can be measured in points (pt). New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 14
Creating Headings XP XP XP XP XP New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 15
The Paragraph Element XP XP XP XP XP The paragraph element is used to identify a paragraph of text: <p>content</p> New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 16
Text Formatting Tags XP XP XP XP XP The strong element renders text in bold. The em element renders text in italic. For applying two or more effects, nested tags are used: <tag1><tag2>content</tag2><tag1> New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 17
Inserting Special Characters XP XP XP XP XP Special characters cannot be created by using the keyboard. A named character reference has the following form: &name; A numeric character reference has the following form: &#number; New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 18
Using Images on a Web Page XP XP XP XP XP Image file formats are GIF, JPEG, and PNG. The image element is used to insert an image on a Web page: <img /> An attribute specifies the name of a property related to a Web page element and the value for that property. The image tag contains a source property: src src = "images/logo.jpg" New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 19
Using the img Element XP XP XP XP XP filename the filename of the image alternate_text a description of the image widthvalue the width of the image in pixels heightvalue the height of the image in pixels New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 20
Attributes Used with Images XP XP XP XP XP alt provides a brief description of the image, and is used as a ScreenTip or ToolTip title provides some information about the element in which it is included width and height specify the dimensions of the area of the Web page where the image will be rendered New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 21
Attributes Used with Images XP XP XP XP XP New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 22
Creating Lists XP XP XP XP XP You can use HTML to create an unordered list (a bulleted list), an ordered list (a list with numbers or letters), and a definition list (a list with a hanging indent format). New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 23
Nested Lists XP XP XP XP XP A nested element is an element that is inside of another element. A sublist is a list that is nested inside a list item of another list. The general structure of a nested list: New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 24
Nested Lists XP XP XP XP XP New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 25
Ordered List XP XP XP XP XP An ordered list structure: New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 26
The Description List XP XP XP XP XP A use of the description list is to create: chronology list of events in time order glossary alphabetic list of terms and definitions A description list structure: New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 27
The break Element XP XP XP XP XP New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 28
The meta Element XP XP XP XP XP Metadata is data that provides information about other data. <meta name = "name of category" content = "content data" /> New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 29
Validating a Completed File XP XP XP XP XP Validation is the process of checking the file for syntax and compliance errors. Validation does not check for spelling, typos, or grammar errors. In addition to the HTML and XHTML standards, there is also a Web Accessibility Initiative standard. There are free validators available. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 30
Validating a Completed File XP XP XP XP XP A code validator is a Web site that provides a mechanism to submit a code, and provides an error report. New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 31
Validation Report XP XP XP XP XP New Perspectives on Blended HTML and CSS Fundamentals, 3rd Edition 32
