html - server
Download
Report
Transcript html - server
HTML Basics
• Different types of HTML Editors.
• The bulk of the software packages can be broken up
into two main categories: text-based HTML editors
(also called code-based HTML editors) and
WYSIWYG (What You See Is What You Get) editors.
• Text-based editors require you to know some HTML
to use them.
• They can be customized to help speed your coding
process, and often have sophisticated checks and
balances in place to check for errors in coding.
HTML Basics
tMyn
1
• WYSIWYG editors don’t require HTML knowledge.
• Instead of looking at the HTML of your pages, you
are shown a “preview” of how the page will look in a
browser.
• You can simply drag-and-drop pieces of your layout
as you see fit.
• In this module we use Crimson Editor (text-based).
HTML Basics
tMyn
2
• HTML files are simply text files with two additional
features.
1. HTML files have an .html file extension. A file
extension is an abbreviation that associates the file
with the appropriate program or tool needed to
access.
2. HTML files have tags. Tags are commands or code
used to tell the computer how to display the page
content.
HTML Basics
tMyn
3
• You can view HTML files located on your PC within
your own Web browser.
• It isn’t necessary for your files to be stored on a Web
server until you are ready to make them visible on the
Internet.
• When you want to preview a page, open your Web
browser and choose File -> Open…, and then
browse your hard disk until you locate the HTML file
you want to open.
HTML Basics
tMyn
4
• The steps to edit and preview HTML files are
1. Open/return to your HTML file in a text editor.
2. Edit your HTML file in a text editor.
3. Save your HTML file in a text editor.
4. Open/return to your HTML file in a Web browser.
5. Click the REFRESH button in your Web browser to
update the HTML page according to any changes you
just made to it.
• By keeping your HTML file open in both a text editor
and a browser, you can easily make and preview
changes.
HTML Basics
tMyn
5
• In the classroom PCs the configuration has been
implemented so that each PC does have a Web
server software (Apache HTTP Server) of it’s own.
• All the HTML files must be saved to the directory
C:\Program Files\Apache
Group\Apache2\htdocs\YourPersonalFoulderName
• This means that http://localhost will display the home
page of the local web site.
HTML Basics
tMyn
6
• An HTML entity or tag is a command used to tell the
computer how to display content on a page.
• This command is similar to what happens behind the
scenes when when you highlight some text in a word
processor and click the BOLD button to make the text
boldface.
• With HTML, you type a tag before and after the text
you want to make bold. Tags are placed within
brackets (<>) or less-than and greater-than symbols:
<b>Reminder:</b> There will be no
violin practice today.
HTML Basics
tMyn
7
• In HTML, there are usually both opening and closing
tags. For example, if you use <b> as an opening tag
to signify where to start making text bold, you have to
use a closing tag to signify where to stop making text
bold. To do so, you use the same tag with a forward
slash placed before it: </b>.
• An HTML element is everything from the start tag
(opening tag) to the end tag (closing tag).
• Following are some of the most basic HTML tags:
HTML Basics
tMyn
8
Basic HTML Page Tags:
Opening Tag
Closing Tag
Description
<html>
</html>
Tells the browser which set
of standards your page
adheres to.
<head>
</head>
Frames the identification
information for the page,
such as the title.
<title>
</title>
Gives the name of the
page that will appear at the
top of the browser window
and be listed in search
engines.
<body>
</body>
Frames the content of the
page to be displayed in the
browser window.
HTML Basics
tMyn
9
• The element content is everything between the start
and the end tag.
<p>This is something big</p>
• The <p> element content above is: This is something
•
Some HTML elements have empty content.
•
Empty elements are closed in the start tag.
• <br> is an empty element without a closing tag (it
defines a line break).
HTML Basics
tMyn
10
• Many tags have additional aspects that you can
customize. These options are called attributes and
are placed after the tag, but before the final bracket.
<img alt=”” src=”flower.jpg”>
• In the example above, the tag is img, and the
attributes are alt and src. Each attribute has a
value, which comes after an equal sign (=) and is
placed within quotation marks.
• Most HTML elements can have attributes.
• Some useful attributes are as follows:
HTML Basics
tMyn
11
Some useful attributes:
Attribute
Description
class
Specifies a classname for an element
id
Specifies a unique id for an element
title
Specifies extra information about an
element
lang
Specifies a language code for the content
in an element
HTML Basics
tMyn
12
• The term nesting refers to the process of containing
one HTML tag inside another:
<b>This text is bold and
<i>italic</i></b>
• You should always be able to draw semicircles that
connect the opening and closing versions of each
tag. If any of your semicircles intersect, your tags are
not nested properly.
HTML Basics
tMyn
13
• Sometimes you might not want visitors to your Web
site to see comments or notes you need to add to
your Web pages:
<!-- Remember to update this page after
the new product becomes available -->
• A space should appear after the opening comment
and before the closing comment.
HTML Basics
tMyn
14
• Paragraphs are defined with the <p> tag.
• Browsers automatically adds an empty line before
and after paragraphs.
• The next examples show some basic usages of the
most common tags.
HTML Basics
tMyn
15
• The <title> tag defines the title of the document.
• The title element is required in all HTML documents.
• The title element:
– defines a title in the browser toolbar
– provides a title for the page when it is added to favorites
– displays a title for the page in search-engine results
HTML Basics
tMyn
16
HTML Basics
tMyn
17
HTML Basics
tMyn
18
• One of the earliest means of formatting text was the
heading tag.
• The <h1> to <h6> tags are used to define HTML
headings.
• <h1> defines the largest heading and <h6> defines
the smallest heading.
HTML Basics
tMyn
19
• The <div> tag defines a division or a section in an
HTML document.
• The <div> tag is often used to group block-elements
to format them with styles.
• Browsers usually place a line break before and after
the div element.
<div>Written somewhere 29 of December,
1957.</div>
HTML Basics
tMyn
20
• The phrase tags are tags that give structural
information to fragments of text.
• The phrase tags include the <em> and <strong>:
<em> Renders as emphasized text
<strong> Renders as strong emphasized text
HTML Basics
tMyn
21
HTML Basics
tMyn
22
HTML Basics
tMyn
23
• There are three types of lists, two of them are
covered here.
• An ordered list is one in which each item is preceded
by a number or letter. For example:
My favorite fruits are
1. raspberries
2. strawberries
3. apples
• The HTML code would look like:
HTML Basics
tMyn
24
My favorite fruits are
<ol>
<li>raspberries</li>
<li>strawberries</li>
<li>apples</li>
</ol>
• <ol> means ordered list and <li> means list item.
• The default type of ordered list uses Arabic numbers.
HTML Basics
tMyn
25
• The second type of list is similar to the first, except
unordered lists don’t use numbers or letters. As the
name suggests, unordered lists don’t rely on order for
importance.
• These lists use bullets to precede each list item. For
example:
• Red
• Green
• Blue
• The HTML code would look like:
HTML Basics
tMyn
26
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
HTML Basics
tMyn
27
HTML Basics
tMyn
28
HTML Basics
tMyn
29
• HTML enables us to link to other Web pages, as well
as graphics, multimedia, e-mail addresses,
newsgroups, and downloadable files.
• Anything you can access through your browser can
be linked to from within an HTML document.
• In fact, one of the easiest ways to identify the URL of
a page you want to link to is to copy it from the
address toolbar in your Web browser.
• You can then paste it directly into your HTML file.
• You can add links to other Web pages, whether they
are part of your Web site or someone else’s:
HTML Basics
tMyn
30
The href attribute gives
the location of the
page or site we are
linking to
This is the opening tag
The capital of Sweden is <a href=
"http://www.stockholm.se/">Stockholm</a>.
This is the text that
will be linked in
the Web page.
In this case, the value of the
href attribute is the full URL
of the Web page.
This is the closing tag
HTML Basics
tMyn
31
• The a tag itself doesn’t serve much purpose without
its attributes.
• The most common attribute is href, which is short
for hypertext reference: it tells the browser where to
find the information to which you are linking.
• The text included in between the opening and closing
a tag is what the person viewing your Web page can
click.
• In most cases, this text is highlighted as a different
color from the surrounding text and is underlined.
HTML Basics
tMyn
32
HTML Basics
tMyn
33
HTML Basics
tMyn
34
HTML Basics
tMyn
35
Visited link does have a different color.
HTML Basics
tMyn
36
• In deciding what to use as the value of your href
attribute, consider what type of link you want to use.
• Two basic types of links exist: absolute and relative.
• Absolute links are those that include the entire
pathname.
• In most cases, you use absolute links when linking to
pages or sites that are not part of your own Web site.
• For example, if you are linking from your Web site to
the city of Mikkeli, you type
<a href=www.mikkeli.fi>Visit Mikkeli
home page!</a>
HTML Basics
tMyn
37
• Relative links are called so because you don’t include
the entire pathname of the page to which you are
linking. Instead, the pathname you use is relative to
the current page.
• Relative links are most commonly used when you
want to link from one page in your site to another, for
example:
<a href=“contactMe.html”>Contact Me
Now!</a>
• This link looks for the file contactMe.html in the
same folder that contains this page.
HTML Basics
tMyn
38
• If you need to link to a file in a folder above the folder
your page is in, you add “../” for each directory up the
tree. So, if the file you are linking to is two folders
higher than the one you are in, you might use
• <a href=“../../contactMe.html”>Contact
Me Now!</a>
HTML Basics
tMyn
39
• Sometimes you may want to link to a section of text
within a page on your Web site.
• To link to a section of a Web page, you must first give
that section a name.
• An anchor is a place within a page that is given a
special name, enabling you to link to it later:
HTML Basics
tMyn
40
This attribute of the a tag
enables you to name a
section of your Web page.
This is the actual name of the
section that prints out onscreen.
<a name=“section1”>Section 1</a>
The value of the name attribute is the name
of your section. Use easy-to-remember
section names without any spaces or punctuation.
HTML Basics
tMyn
41
• To create the link to an anchor, you also use the a tag
and the href attribute, as you would when creating
any other type of link. To finish the link, you need to
include a hash symbol (#) and the anchor name as
the value of the href attribute:
HTML Basics
tMyn
42
This is the name of the
anchor we are linking to.
This text will be underlined and
linked to wherever the
“section1” anchor resides .
<a href=“#section1”>More in Section 1</a>
The hash mark tells the browser we are
linking to a specific section of the same page.
HTML Basics
tMyn
43
• From the previous page: If we want to link to a
section of text within a page in the same folder (but to
a different page, let us say different.html) then we
would have to write
<a href=“different.html#section1”>More
in Section 1</a>
• And finally the entire pathname (so to a different
folder), for example
<a href=“http://www.someWhereThere/
different.html#section1”>More in
Section 1</a>
HTML Basics
tMyn
44
• Instead of using the name attribute of the a tag we
can use id (a unique id for the element ) attribute to
achieve the same as in the previous pages:
HTML Basics
tMyn
45
HTML Basics
tMyn
46
HTML Basics
tMyn
47
HTML Basics
tMyn
48
HTML Basics
tMyn
49
HTML Basics
tMyn
50
HTML Basics
tMyn
51
HTML Basics
tMyn
52
• We can add images in our Web page by using the
img tag:
<img src=“photo.jpg”>
• The image should be in a Web-friendly file format,
such as GIF or JPEG.
• The value of the src attribute (source) includes the
correct path name and location of your file
HTML Basics
tMyn
53
• Whenever images appear within a section of text, you
may want to alter the alignment.
• By default, the text starts whenever the image ends
and flows below it.
• Next example puts the image to the left:
HTML Basics
tMyn
54
HTML Basics
tMyn
55
HTML Basics
tMyn
56
HTML Basics
tMyn
57
• Next example puts the image to the right:
HTML Basics
tMyn
58
HTML Basics
tMyn
59
HTML Basics
tMyn
60
HTML Basics
tMyn
61
• Finally on example where the picture is before the
text:
HTML Basics
tMyn
62
HTML Basics
tMyn
63
HTML Basics
tMyn
64
HTML Basics
tMyn
65
• The next example utilizes many of the features
included so far:
HTML Basics
tMyn
66
HTML Basics
tMyn
67
HTML Basics
tMyn
68
HTML Basics
tMyn
69
HTML Basics
tMyn
70
• The <hr> tag creates a horizontal line in an HTML
page.
• The hr element can be used to separate content in
an HTML page.
• In HTML the <hr> tag has no end tag.
HTML Basics
tMyn
71
Official additions
• Even if all the examples above were working ones,
they all lacked some official components.
• Let’s add them now:
HTML Basics
tMyn
72
HTML Basics
tMyn
73
HTML Basics
tMyn
74
• According to HTML standards, each HTML document
requires a document type declaration. The
"DOCTYPE" begins the HTML document and tells a
validator which version of HTML to use in checking
the document's syntax, for example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML Basics
tMyn
75
Document structure elements are:
• <html>...</html>
– The Root Element of an HTML document; all other
elements are contained in this.
• <head>...</head>
– Container for processing information and
metadata for an HTML document.
• <body>...</body>
– Container for the displayable content of an HTML
document.
HTML Basics
tMyn
76
Document head elements are for example:
• <base>
– Specifies a base URL for all relative href and other links in
the document. Must appear before any element that refers to
an external resource. HTML permits only one base element
for each document. The base element has attributes, but no
contents.
• <link>
– Specifies links to other documents, such as previous and
next links, or alternate versions. A common use is to link to
external stylesheets, using the form:
• <link rel="stylesheet" type="text/css" href="url"
title="description_of_style">
HTML Basics
tMyn
77
• <meta>
– Can be used to specify additional metadata about a
document, such as its author, publication date, expiration
date, page description, keywords, or other information not
provided through the other header elements and attributes.
Because of their generic nature, meta elements specify
associative key-value pairs.
– In one form, meta elements can specify HTTP headers
which should be sent by a web server before the actual
content, for example:
• <meta http-equiv="foo" content="bar">
– this specifies that the page should be served with an HTTP header
called foo that has a value bar.
• <object>…</object>
– Used for including generic objects within the document
header. Though rarely used within a head element, it could
potentially be used to extract foreign data and associate it
with the current document.
HTML Basics
tMyn
78
• <style>…</style>
– Specifies a style for the document, usually in the form:
• <style type="text/css"> … </style>
• <title>…</title>
– Define a document title. Required in every HTML and
XHTML document. User agents may use the title in different
ways. For example:
– Web browsers usually display it in a window’s title bar when the
window is open, and (where applicable) in the task bar when the
window is minimized.
– It may become the default filename when saving the page.
– Search engines’ web crawlers may pay particular attention to the
words used in the title.
– The title element must not contain other elements, only text.
Only one title element is permitted in a document.
HTML Basics
tMyn
79
• The Markup Validation Service by the World Wide
Web Consortium (W3C) allows Internet users to
check HTML documents for conformance to HTML
standards. It also provides a quick method for web
page authors to check their posted pages for mark-up
errors.
• HTML validators operate by comparing the mark-up
on a web page to the W3C standards. The standards
vary depending upon the declared version and so the
validator will start by reading the DOCTYPE
declaration to see which set of standards to apply.
• Once the validator has read the page and determined
the applicable standards it looks for such things as
missing opening or closing tags, missing quotation
marks and other hand-coding errors.
HTML Basics
tMyn
80
• The validator then provides a report indicating that
the coding is correct or not. Errors are noted in a list.
One error, such as neglecting to close a tag, can
cause a cascade of errors through the page,
producing dozens or even hundreds of noted errors.
However when the page author addresses the first
error listed it will also eliminate the "cascade errors".
• Many major browsers are often tolerant of certain
types of error, and may display a document
successfully even if it is not syntactically correct.
HTML Basics
tMyn
81
• All mark-up validators suffer from an inability to see
the "big picture" on a web page. However they excel
at picking up missed closing tags and other
technicalities. This does not mean that the page will
display as the author intended in all browsers.
• Even if validated, all web pages should be tested in
as many different browsers as possible to ensure that
the limitations of the validator are compensated for
and that the page works correctly.
• http://validator.w3.org
HTML Basics
tMyn
82
HTML Basics
tMyn
83
HTML Basics
tMyn
84
HTML Basics
tMyn
85
HTML Basics
tMyn
86
HTML Basics
tMyn
87
HTML Basics
tMyn
88