- Parent Directory

Transcript - Parent Directory

Chapter 2
Markup Languages
(HTML)
Markup Languages
A markup language is a computer language that uses tags to define elements
within a document. It is human-readable, meaning markup files contain
standard words, rather than typical programming syntax. While several
markup languages exist, the two most popular are HTML and XML.
An abbreviation of "Hyper Text Mark-up Language”.
Hyper is the opposite of linear. Linear means that the program is executed
sequentially in an order, but HTML is different - you can randomly select
whatever, wherever and whenever you want.
Text is self-explanatory.
Mark-up the text the same way you do in a text editing program with
headings, bullets and bold text and so on.
Language is what HTML is. It uses many English words.
HTML is a markup language used for creating webpages. Basic page tags,
such as <head>,<body>, and <div> define sections of the page, while tags
such as <table>, <form>, <image>, and <a> define elements within the
page. Most elements require a beginning and end tag, with the content
placed between the tags. For example, a link to the TechTerms.com home
page may use the following HTML code:
<a href="http://www.techterms.com">TechTerms.com</a>
Extensible Markup Language
XML is used for storing structured data, rather than formatting information
on a page. While HTML documents use predefined tags, XML files use
custom tags to define elements. For example, an XML file that stores
information about computer models may include the following section:
<computer>
<manufacturer>Dell</manufacturer>
<model>XPS 17</model>
<components>
<processor>2.00 GHz Intel Core i7</processor>
<ram>6GB</ram>
<storage>1TB</storage>
</components>
</computer>
XML is called the "Extensible Markup Language" since custom tags can be
used to support a wide range of elements. Each XML file is saved in a
standard text format, which makes it easy for software programs to parse or
read the data. Therefore, XML is a common choice for exporting structured
data and for sharing data between multiple programs.
HTML Code – First look
< html >
< head >
< title > Popular Websites: Google < /title >
< /head >
< body >
< h1 > About Google < /h1 >
< p > Google is best known for its search engine, although
Google now offers a number of other services. < /p >
< p > Google’s mission is to organize the world’s information and
make it universally accessible and useful. < /p >
< p > Its founders Larry Page and Sergey Brin started Google at
Stanford University. < /p >
< /body >
< /html >
Tags and Elements
If you look at the first and last lines of the code for the last example, you
will see pairs of angle brackets containing the letters “ html ” Starting on
the first line, the first angled bracket looks like a less - than sign, then there
are the letters “ html ,” followed by a second angled bracket, which looks
like a greater – than sign. The two brackets and all of the characters
between them are known as a tag . A pair of tags and the content these
include are known as an element . In Figure 1 - 2, you can see the heading
for the page of the last example.
Separating Heads from Bodies
Whenever you write a web page in HTML, the whole of the page is
contained between the opening
< html > and closing < /html > tags. There are two main parts to the page:
The < head > element: Often referred to as the head of the page, this
contains information about the page (this is not the main content of the
page). For example, it might contain a title and a description of the page, or
instructions on where a browser can find CSS rules that explain how the
document should look. It consists of the opening < head > tag, the closing <
/head > tag, and everything in between.
The < body > element: Often referred to as the body of the page, this
contains the information you actually see in the main browser window. It
consists of the opening < body > tag, closing < /body > tag, and everything
in between. Together, the < html > , < head > , and < body > elements make
up the skeleton of an HTML document — they are the foundation upon
which every web page is built. Inside the < head > element of the first
example page, you can see a < title > element:
< head >
< title > Popular Websites: Google < /title >
< /head >
Elements for Marking Up Text
You now know that an HTML page is made up of elements that describe
how its content is structured. learning the different elements you can use to
describe the structure of text:
The six levels of headings: < h1 > , < h2 > , < h3 > , < h4 > , < h5 > ,
and < h6 >
Paragraphs < p > , preformatted sections < pre > , line breaks < br / > , and
addresses < address >
Presentational elements: < b > , < i > , < u > , < s > , < tt > , < sup > ,
< sub > , < strike > , < big > , < small > , and < hr / >
Phrase elements such as : < em > , < strong > , < abbr > , < acronym > ,
< dfn > , < blockquote > , < q > , < cite > , < code > , < kbd > , < var > ,
< samp > , and < address >
Unordered lists using : < ul > and < li >
Ordered lists using : < ol > and < li > , and
Definition lists using : < dl > , < dt > , and < dd >
Editing elements such as : < ins > and < del >
Grouping elements : < div > and < span >
Comments
You can put comments between any tags in your HTML documents.
Comments use the following syntax:
< !-- comment goes here -- >
Anything after < ! - - until the closing - - > will not be displayed. It can still
be seen in the source code for the document, but it is not shown onscreen. It
is good practice to comment your code, especially in complex documents,
to indicate sections of a document, and any other notes to anyone looking
at the code.
The < font > Element
The < font > element allows you to control the presentation of text — its
size, the typeface, and color e.g.,
< font face=”arial, verdana, sans-serif” size=”2” color=”#666666” >
Understanding Block and Inline Elements
Now that you have seen many of the elements that can be used to mark up text, it is
important to make an observation about all the elements that live inside the
< body > element, because each one can fall into one of two categories:
Block - level elements appear on the screen as if they have a carriage return or line
break before and after them. For example, the < p > , < h1 > , < h2 > , < h3 > , < h4
> , < h5 > , < h6 > , < ul > , < ol > , < dl > , < pre > , < hr / > , < blockquote > , and
< address > elements are all block - level elements. They all start on their own new
lines, and anything that follows them appears on its own new line, too.
Inline elements appear within sentences and do not have to appear on new lines of
their own. The < b > , < i > , < u > , < em > , < strong > , < sup > , < sub > , < big >
, < small > , < ins > , < del > , < code > , < cite > , < dfn > , < kbd > , and < var >
elements are all inline elements. For example:
< h1 > Block-Level Elements < /h1 >
< p > < strong > Block-level elements < /strong > always start on a new line.
The < code > & lt;h1 & gt; < /code > and < code > & lt;p & gt; < /code > elements
will not sit on the same line, whereas the inline elements flow with the rest of the
text. < /p >
Core Elements and Attributes
The following elements form the basic structure of every document.
The < html > Element
The < html > element is the containing element for the whole HTML document. After the
optional XML declaration and required DOCTYPE declaration, each HTML document should
have an opening < html > tag and each document should end with a closing < /html > tag.
The < head > Element
The < head > element is just a container for all other header elements. It is the first thing to
appear after the opening < html > tag. Each < head > element should contain a < title >
element indicating the title of the document, < object > , which is designed to include images,
JavaScript objects, Flash animations, MP3 files, < link > to link to an external file, such as a
style sheet or JavaScript file. < style > to include CSS rules inside the document. < script >
for including script in the document. < meta > , which includes information about the
document such as keywords and a description, which are particularly helpful for search
applications;
The < title > Element
You should specify a title for every page that you write using the < title > element. It is
presented and used in several ways: By search engines that use its content to help index pages.
The < body > Element
The < body > element appears after the < head > element and as you have already seen, it
contains the part of the web page that you actually see in the main browser window, which is
sometimes referred to as body content .
Links and Navigation
What really distinguishes the Web from other mediums is the way in which a web page can
contain links (or hyperlinks) that you can click on to be taken from one page to another page.
The link can be a word, phrase, or image. When you link to another page in your own web
site, the link is known as an internal link . When you link to a different site, it is known as
an external link .
Basic Links
A link is specified using the < a > element. Anything between the opening < a > tag and the
closing < /a > tag becomes part of the link that users can click in a browser.
Linking to Other Web Pages
To link to another web page, the opening < a > tag must carry an attribute called href ; the
value of the href attribute is the name of the file you are linking to
< body >
< p > Return to the < a href=”index.html” > home page < /a > . < /p >
< /body >
You can also use the title attribute on a link; the value of the title attribute should be a
description of what the link will take you to, which will be displayed in a tooltip when you
hover over the link. This can be especially helpful if you do use an image for a link.
The following is a link to the Google homepage:
< a href=”http://www.Google.com/” title=”Search the Web with Google” > Google < /a > is a
very popular search engine.
Linking to E - mail Addresses
You ’ ve probably seen a link that shows an e - mail address, which when clicked on
opens a new e - mail in your e - mail program, ready for you to send an e - mail to
that address. To create a link to an e - mail address, you need to use the following
syntax with the < a > element:
< a href=”mailto:[email protected]” > [email protected] < /a >
Here, the value of the href attribute starts with the keyword mailto , followed by a
colon, and then the e - mail address you want the mail sent to. As with any other
link, the content of the < a > element is the visible part of the link shown in the
browser, so this would also work:
< a href=”mailto:[email protected]” > E-mail us < /a >
Directories and Directory Structures
A directory is simply another name for a folder on a web site; in the same way that
your hard drive contains different folders, a web site can be said to contain
directories. Usually you will find that a web site contains several directories, and
that each directory contains different parts of a web site. For example, a big site
with several subsections will have a separate directory for each section of that site,
and also different directories for different types of files. When you start to build any
web site you should create a good directory structure that can withstand
growth. As you learn about linking, it ’ s helpful to learn some of the terms that are
used in describing directory structures and the relationships between directories.
The root directory (or root folder) is the main directory that holds the whole of
you web site.
A subdirectory is a directory that is within another directory.
A parent directory is a directory that contains another directory.
Understanding URLs
A URL or Uniform Resource Locator specifies where you can find a resource on the
web; you are probably most used to thinking of them as web addresses. As you move
around the Web, you will see the URL of each web page in the address bar of your
browser.
If you look at the example URL below, there are three key parts to the URL: the
scheme, the host address, and the filepath.
The scheme identifies the way a file is transmitted. Most web pages use
something called the Hypertext Transfer Protocol (HTTP) to pass information to
you, which is why most web pages start with http:// , although you might have
noticed other prefixes such as https:// when doing banking online (which is a more
secure form of http) or ftp:// when downloading large files.
The host address is usually the domain name for the site, e.g., wrox.com . Often
you will see www before the domain name, although it is not actually part of the
domain name itself. The host address can also be a number called an IP address.
The filepath always begins with a forward slash character, and may consist of one
or more directory names (remember, a directory is just another name for a folder on
the web server). The filepath may end with a filename at the end. Here,
BeginningHTML.html is the filename: /books/BeginningHTML.html
The filepath will usually correspond to the directory structure of the web site, so in
this case the BeginningHTML.html page would be found in a directory called
books .
Absolute and Relative URLs
An absolute URL contains everything you need to uniquely identify a particular
file on the Internet. This is what you would type into the address bar of your
browser in order to find a page.
http://www.exampleNewsSite.com/Entertainment/Film/index.html
As you can see, absolute URLs can quickly get quite long, and every page of a web
site can contain many links. When linking to a page on your own site, however, you
can use a shorthand form: relative URLs.
A relative URL indicates where the resource is in relation to the current page. You
can also use relative URLs to specify files in different directories. For example,
imagine you are looking at the homepage for the entertainment section of the
following fictional news site:
http://www.exampleNewsSite.com/Entertainment/index.html
Images
You will start by learning how to add images to your documents using the < img >
element. We can also use an image as a hyper link. We can even divide an
image up into sections so that different parts of the image link to different
pages — this is known as an image map .
Adding Images Using the < img > Element
Images are added to a site using the < img > element, which has to carry at least
two attributes: the src attribute, indicating the source of the image, and an alt
attribute, which provides a description of the image.
For example, the following line would add the image called logo.gif into the page
(in this case, the image lives in a directory called images).
< img src=”logo.gif” alt=”Wrox logo” / >
The src Attribute
The src attribute tells the browser where to find the image. The value is a URL
and, just like the links you met in the last chapter, the URL can be an absolute
URL or a relative URL.
< img src=”logo.gif” / >
The alt Attribute
The alt attribute must appear on every < img > element and its value should be
a text description of the image.
< img src=”logo.gif” alt=”Wrox logo” / >
The height and width Attributes
The height and width attributes specify the height and width of the image, and
the values for these attributes are almost always shown in pixels.
< img src=”logo.gif” alt=”Wrox Logo” height=”120” width=”180” / >
The align Attribute
The align attribute was created to align an image within the page (or if the
image is inside an element that is smaller than the full page, it aligns the image
within that element).
<img src=”images/cover.gif” alt=”Book cover” align=”left” />
The < table > Element Creates a Table
The < table > element is the containing element for all tables. It can carry the
following attributes:
The align Attribute
Although it is deprecated, the align attribute is still frequently used with tables.
When used with the < table > element, it indicates whether the table should be
aligned to the left (the default), right , or center of the page. You use the attribute
like so:
< table align=”center” >
< table border=”1” align=”left” >
< tr >
< td > Row 1, Column 1 < /td >
< td > Row 1, Column 2 < /td >
< /tr >
< tr >
< td > Row 2, Column 1 < /td >
< td > Row 2, Column 2 < /td >
< /tr >
< /table >
The bgcolor Attribute
The bgcolor attribute sets the background color for the table. The value of this
attribute should either be a color name or a six - digit code known as a hex code .
The syntax is as follows: bgcolor=”red”
The border Attribute
If you use the border attribute, a border will be created around both the table and
each individual cell. The value for this attribute is the width you want the outside
border of the table to be, in pixels. If you give this attribute a value of 0 , or if you
do not use this attribute, then you should not get any borders on either the table or
any cells. border=”0”
The cellpadding Attribute
The cellpadding attribute is used to create a gap between the edges of a cell and its
contents. The value for this attribute determines the amount of space or padding
inside each wall of the cell, specified either in pixels or as a percentage value
(where the percentage is a percentage of the width of each cell). cellpadding=”5” or
cellpadding=”2%”
The cellspacing Attribute
The cellspacing attribute is used to create a space between the borders of each cell.
The value for this attribute can be either the amount of space you want to create
between the cells, in pixels, or a percentage value. cellspacing=”6” or
cellspacing=”2%”
The dir Attribute
The dir attribute is supposed to indicate the direction of text that is used in the table.
Possible values are ltr for left to right text and rtl for right to left (for languages
such as Hebrew and Arabic): dir=”rtl”
The frame Attribute
The frame attribute is supposed to control the appearance of the outermost border of
the whole table, referred to here as its frame , with greater control than the border
attribute. If both the frame and border attributes are used, the frame attribute takes
precedence. The syntax is: frame=” frameType ”
The following table shows the possible values for the frame attribute.
Value
Purpose
Void
No outer border (the default)
above
A border on the top only
below
A border on the bottom only
hsides
A border on the top and bottom
lhs
A border on the left side of table
rhs
A border on the right side of table
vsides
A border on the left and right sides of table
box
A border on all sides
border
A border on all sides