All web pages are formatted using HTML tags An abbreviation of a formatting instruction or page element Most HTML tags are container tags 2 tags (beginning and end) Wrapped around a range of text End tag looks same as start tag, except it has a /. the content the tag affects A few tags are standalone tags Drop them into place where you want an element to appear Standalone elements do not need end tags other content
Creating Simple PagesHow an HTML document is structured
Introducing…..the HTML Tag
An abbreviation of a formatting instruction or page element
Most HTML tags are container tags
2 tags (beginning and end)
Wrapped around a range of text
End tag looks same as start tag, except it has a /.
<tag>the content the tag affects </tag>
A few tags are standalone tags
Drop them into place where you want an element to appear
Standalone elements do not need end tags
<tag>other content
Formatting text.
Giving the document basic structure
All web pages require a set of structural tags that help the
browser sort out the parts of the document.
HTML documents have two parts
Head (also called a header)
<head>
Body
<body>
Contains the actual content that displays in the browser
window
You must identify the document as being written n HTML with
<html> tags.
Basic HTML skeleton structure
Let’s Try It
Complete Exercise 6-1 Part 1handout
Giving the page a title
Title is the name you give a page and it shows up in the title bar
at the top of the browser window.
Use <title> container tags and it goes within the head of the
document
Importance of title
First thing search engines look at when indexing pages
Step 1: Setting Up The HTML Document
Saving and Viewing the page
Save with the ending .htm or .html in order to be recognized by the
browser as a web document
Step 1: Setting Up The HTML Document
Let’s Try It
Step 2: Formatting Text
Let’s Try It
Step 3: Adding Graphical Elements
Introducing attributes
Attributes are instructions added within a tag to modify its
behavior or appearance.
Example: <tag attribute=“value”>
Appear only in the beginning tag of the container tags
Example: <tag attribute=“value”>affected
text</tag>
About Attributes
Go only in the opening container tag
Closing tag includes just the tag name
Most (not all) take values, which follows an equals sign (=) after
the attributes name
Value must be a number, word, string of text, URL or
measurement
Attribute value should always appear within quotation marks.
Several attributes can be added within a single tag
Some attributes are required
Let’s Try It
Step 4: Adding a Hypertext Link
Linking
Links are added with a container tag called an anchor
<a>…</a>
Placed around the text that you want to serve as a link
Need to specify which page you want to link to
href=
Let’s Try It
Having Problems
“I’ve changed my document, but when I reload the page in my
browser, it looks exactly the same.”
It could be you didn’t save your HTML document before reloading or
you saved it in a different directory.
“All the text on my page is HUGE!!!”
Did you start a heading tag and forget to close it? Make sure each
tag you’ve used has its end tag. Also, make sure that each end tag
has a slash (/).
“Half of my page has disappeared!”
This could happen if you are missing a closing bracket (>) or a
quotation mark within a tag. This is a common error when writing
HTML code by hand.
I put in a graphic using the <img> tag, but all that shows up
is a broken-graphic icon.
The broken graphic could mean that the browser is not finding the
graphic. Make sure the URL to the graphic is correct. Make sure the
graphic is actually in the directory you’ve specified. If there,
then make sure it’s in a format the browser can display (GIF, JPEG,
or PNG) and it’s named with the proper suffix (.gif, .jpeg, or
.png).
Let’s Try It
Questions
What makes a container tag different from a standalone tag?
Write out the code for the basic skeleton of a web document.
Questions
Mark whether each of these filenames is an acceptable name for a
web page by circling “Yes” or “No”. If it is not acceptable,
provide the reason why.
Sunflower.html
Yes
No
Questions
All of the following tags are incorrect. Describe what is wrong
with each one, then write them correctly.
<img “birthday.jpg”>
<p>This is a new paragraph<\p>
![3. HTML Language file3/3/2016 · used to create web pages.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a](https://img.pdfslide.net/doc/110x75/5cc4404288c99334048b5cf9/3-html-language-used-to-create-web-pages1-web-browsers-can-read-html-files.jpg)
