HTML BasicstMyn1 HTML Basics Different types of HTML Editors. The bulk of the software packages can...

HTML Basics tMyn 1

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 2

• 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 3

• 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 4

• 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 5

• 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 6

• 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 7

• 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 8

• 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 9

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.

Basic HTML Page Tags:

HTML Basics tMyn 10

• 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 11

• 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 12

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

Some useful attributes:

HTML Basics tMyn 13

• 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 14

• Sometimes you might not want visitors to your Web site to see comments or notes you need to add to your Web pages:



• A space should appear after the opening comment and before the closing comment.

HTML Basics tMyn 15

• 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 16

• 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 17

HTML Basics tMyn 18

HTML Basics tMyn 19

• 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 20

• 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 21

• 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 22

HTML Basics tMyn 23

HTML Basics tMyn 24

• 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 25

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 26

• 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 27

<ul>

<li>Red</li>

<li>Green</li>

<li>Blue</li>

</ul>

HTML Basics tMyn 28

HTML Basics tMyn 29

HTML Basics tMyn 30

• 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 31

The capital of Sweden is <a href= "http://www.stockholm.se/">Stockholm</a>.

This is the opening tag

The href attribute givesthe location of the page or site we arelinking to

In this case, the value of the href attribute is the full URLof the Web page.

This is the closing tag

This is the text thatwill be linked inthe Web page.

HTML Basics tMyn 32

• 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 33

HTML Basics tMyn 34

HTML Basics tMyn 35

HTML Basics tMyn 36

Visited link does have a different color.

HTML Basics tMyn 37

• 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>

http://www.mikkeli.fi/

HTML Basics tMyn 38

• 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 39

• 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 40

• 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 41

<a name=“section1”>Section 1</a>

This attribute of the a tagenables you to name a section of your Web page.

This is the actual name of thesection that prints out onscreen.

The value of the name attribute is the nameof your section. Use easy-to-remembersection names without any spaces or punctuation.

HTML Basics tMyn 42

• 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 43

<a href=“#section1”>More in Section 1</a>

This is the name of theanchor we are linking to.

This text will be underlined andlinked to wherever the “section1” anchor resides .

The hash mark tells the browser we arelinking to a specific section of the same page.

HTML Basics tMyn 44

• 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 45

• 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 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

HTML Basics tMyn 53

• 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 54

• 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 55

HTML Basics tMyn 56

HTML Basics tMyn 57

HTML Basics tMyn 58

• Next example puts the image to the right:

HTML Basics tMyn 59

HTML Basics tMyn 60

HTML Basics tMyn 61

HTML Basics tMyn 62

• Finally on example where the picture is before the text:

HTML Basics tMyn 63

HTML Basics tMyn 64

HTML Basics tMyn 65

HTML Basics tMyn 66

• The next example utilizes many of the features included so far:

HTML Basics tMyn 67

HTML Basics tMyn 68

HTML Basics tMyn 69

HTML Basics tMyn 70

HTML Basics tMyn 71

• 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 72

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 73

HTML Basics tMyn 74

HTML Basics tMyn 75

• 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 76

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 77

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 78

• <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 79

• <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 80

• 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 81

• 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 82

• 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 83

HTML Basics tMyn 84

HTML Basics tMyn 85

HTML Basics tMyn 86

HTML Basics tMyn 87

HTML Basics tMyn 88

HTML BasicstMyn1 HTML Basics Different types of HTML Editors. The bulk of the software packages can...

Documents

Transcript of HTML BasicstMyn1 HTML Basics Different types of HTML Editors. The bulk of the software packages can...