HTML Tags and Elements
HTML markup tags are usually called HTML
tags
- HTML tags are keywords (tag names) surrounded by angle brackets like <html>
- HTML tags normally come in pairs like <b> and </b>
- The first tag in a pair is the start tag, the second tag is the end tag
- The end tag is written like the start tag, with a forward slash before the tag name
- Start and end tags are also called opening tags and closing tags.
HTML Elements
"HTML tags" and "HTML
elements" are often used to describe the same thing.
But strictly speaking, an HTML element is
everything between the start tag and the end tag, including the tags:
HTML Element:
<p>This is a paragraph.</p>
HTML Element Code:
<html>
</html>
Now save your file by selecting - Menu and
then Save. Click on the Save as Type drop down box and select
the option All Files. When you're asked to name your file, name it - index.html.
Double-check that you did everything correctly and then press - Save. Now
open your file in a new web browser so that you have the ability to refresh the
page and see any new changes.
If you opened up your index.html document,
you should be staring at your very first blank (white) web page!
html - <head> element
The <head> is usually the first
element contained inside the <html> element. While it is also an element
container that encapsulates other HTML elements, these elements are not
directly displayed by a web browser. Instead they function behind the scenes,
providing more descriptive information about the HTML document, like its page
title and other meta data. Other elements used for scripting (JavaScript) and
formatting (CSS) are also contained within the <head> element, and we
will eventually introduce how to utilize those languages. For now, the head
element will continue to lay empty except for the title element,
which will be introduced next.
Here's a sample of the initial setup.
HTML Head Element Code:
<html>
<head>
</head>
</html>
If you've made the code changes and
refreshed the browser page, you will notice that we still have nothing
happening on the page. So far, all we've done is add a couple of necessary
elements that describe the web page document to the web browser. Content -- the
stuff you can see -- will come next!
html - <title> element
The <title> element adds a title to a
web page. Web page titles are displayed at the top of any browser window or at
the top of browser tabs. They are probably the first thing seen by web surfers
as pages are loaded, and web pages you bookmark are saved using the web pages' titles.
A proper title makes a good first
impression, and any page caught without a title is considered unprofessional,
at best.
HTML Title Element Code:
<html>
<head>
<title>My
Web Page!</title>
</head>
</html>
Save the file and refresh the browser. You
should see "My Web Page!" in the upper-left bar of your browser
window.
Name your webpage as you please. Just keep
in mind that the best titles are brief and descriptive.
html - <body> element
The element that encapsulates all the
visual elements (paragraphs, pictures, tables, etc.) of a web page is the
<body> element. We will be looking at each of these elements in greater
detail as the tutorial progresses, but for now, it's only important to
understand that the body element is one of the four critical web page elements,
and it contains all of the page's view able content.
HTML Body Element Code:
<html>
<head>
<title>My Web Page!</title>
</head>
<body>
<p>Once upon a time...</p>
</body>
</html>
Go ahead and view your first complete web
page.
HTML - elements reviewed
To recap quickly: we've laid out a set of
four essential elements that are used to create a strong foundation and
structure for your web page. The <html> element encapsulates all page
content and elements, including two special elements: the <head> and
<body> elements. The <head> element is a smaller container for
elements that work behind the scenes of web pages, while the <body>
element houses content elements such as web forms, text, images, and web video.
From here on out, the examples we provide
will assume that you have a firm understanding of these key elements and know
to place the majority of your HTML code inside of the <body> element.
HTML Element Syntax
- An HTML element starts with a start tag / opening tag
- An HTML element ends with an end tag / closing tag
- The element content is everything between the start and the end tag
- Some HTML elements have empty content
- Empty elements are closed in the start tag
- Most HTML elements can have attributes
0 comments:
Post a Comment