tm 1st quarter - 1st meeting

62
HTML Basics Engr. Esmeraldo T. Guimbarda Jr.

Upload: esmeraldo-jr-guimbarda

Post on 12-Jan-2015

406 views

Category:

Education


1 download

DESCRIPTION

HTML Basics

TRANSCRIPT

Page 1: Tm   1st quarter - 1st meeting

HTML Basics

Engr. Esmeraldo T. Guimbarda Jr.

Page 2: Tm   1st quarter - 1st meeting

What is HTML?

HTML is a language for describing web pages. It stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents contain HTML tags and plain texts. They are also called web pages. HTML is easy to learn and to create. With HTML, you can create your own website.

Page 3: Tm   1st quarter - 1st meeting

Identifying the Different Parts of an HTML Code

An HTML code consists of different parts. Each of these parts plays a big role and a specific function in controlling the content and design of your web pages.

Page 4: Tm   1st quarter - 1st meeting
Page 5: Tm   1st quarter - 1st meeting

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 forward slash before the tag name. These tags are also called opening tags and closing tags.

Page 6: Tm   1st quarter - 1st meeting

Sample:

Page 7: Tm   1st quarter - 1st meeting

HTML <!DOCTYPE> declaration

A well written document begins with a basic declaration that defines what type of document it is.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

Page 8: Tm   1st quarter - 1st meeting

HTML <html> tag

The <html> tag tells the browser that this is an HTML document. It represents the root of an HTML document.

The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

Page 9: Tm   1st quarter - 1st meeting

HTML <head> tag

The <head> element is a container for all the head elements. It must include a title for the document, and can include scripts, styles, meta information, and more.Syntax:

Page 10: Tm   1st quarter - 1st meeting

Example:

Output:

Page 11: Tm   1st quarter - 1st meeting

The <title> element defines a title in the browser toolbar, provides a title for the page when it is added to favorites and displays a title for the page in search-engine results.

Page 12: Tm   1st quarter - 1st meeting

HTML <body> tag

The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Syntax:

Page 13: Tm   1st quarter - 1st meeting

Example:

Output:

Page 14: Tm   1st quarter - 1st meeting

Using HTML Tags

HTML tags (otherwise known as "HTML elements"), and their respective attributes are used to create HTML documents so that you can view them in browsers and other user agents.

Page 15: Tm   1st quarter - 1st meeting

HTML Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.

Syntax:

Page 16: Tm   1st quarter - 1st meeting

Example

Output:

Page 17: Tm   1st quarter - 1st meeting

HTML Paragraphs

An HTML Paragraph is defined by a <p> tag. Browsers automatically add some space (margin) before and after each <p> element.

Syntax:

Page 18: Tm   1st quarter - 1st meeting

Example:

Output:

Page 19: Tm   1st quarter - 1st meeting

HTML Links

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.Links are specified in HTML using the <a> tag.

Syntax:

Page 20: Tm   1st quarter - 1st meeting

Example:

This is a linkOutput:

Page 21: Tm   1st quarter - 1st meeting

HTML Images

In HTML, images are defined with the <img> tag. To display an image on a page, you need to use the src (“source”) attribute.

Syntax:

Page 22: Tm   1st quarter - 1st meeting

Example:

Page 23: Tm   1st quarter - 1st meeting

HTML <br> Tag

The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it has no end tag.

Page 24: Tm   1st quarter - 1st meeting

Example

Output:

Page 25: Tm   1st quarter - 1st meeting

Text Formatting

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

Example:

Page 26: Tm   1st quarter - 1st meeting

Output:

Page 27: Tm   1st quarter - 1st meeting

Organizing Webpage Content Using Tables and Lists

HTML can be used to organize data in tables or list items using the ordered, unordered and definition lists.

TablesTables are defined with the <table> tag.

Page 28: Tm   1st quarter - 1st meeting

A table is divided into rows with the <tr> tag.

Page 29: Tm   1st quarter - 1st meeting

Header information in a table is defined with the <th> tag.

Page 30: Tm   1st quarter - 1st meeting

Each row is divided into data cells with the <td> tag. This tag can contain texts, links, images, lists, forms, other tables, etc.

Page 31: Tm   1st quarter - 1st meeting

Example:

Output:

Page 32: Tm   1st quarter - 1st meeting

List

HTML lists appear in web browsers as bulleted lines of text. There are actually three different types of HTML lists, including unordered lists (bullets), ordered lists (numbers), and definition lists.

Page 33: Tm   1st quarter - 1st meeting

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles).

Page 34: Tm   1st quarter - 1st meeting

Example

Output:

Page 35: Tm   1st quarter - 1st meeting

Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers.

Page 36: Tm   1st quarter - 1st meeting

Examples

Output:

Page 37: Tm   1st quarter - 1st meeting

Definition List

A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list.

Page 38: Tm   1st quarter - 1st meeting

Examples

Output:

Page 39: Tm   1st quarter - 1st meeting

Output

Page 40: Tm   1st quarter - 1st meeting

Grouping HTML elements using <div> and <span>

HTML elements can be grouped together

with <div> and <span>.

HTML <div> Element

The HTML <div> element is a block level

element that can be used as a container

for grouping other HTML elements.

Page 41: Tm   1st quarter - 1st meeting

Example

Page 42: Tm   1st quarter - 1st meeting

Output

Page 43: Tm   1st quarter - 1st meeting

HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for text.

Page 44: Tm   1st quarter - 1st meeting

Example

Output:

Page 45: Tm   1st quarter - 1st meeting

Tools Needed?

Notepad++ - a free source code editor and Notepad replacement that supports several languages.

http://notepad-plus-plus.org/

Page 46: Tm   1st quarter - 1st meeting

Web Browser(s) – a software application for retrieving, presenting, and transferring information resources on the World Wide Web. Here are some examples of a web browser:

Page 47: Tm   1st quarter - 1st meeting

Activity: Step 1

Open the webpage file (juan_file.html) from \xampp\htdocs\juan folder and observe what is wrong with the webpage format.

Page 48: Tm   1st quarter - 1st meeting
Page 49: Tm   1st quarter - 1st meeting

Step 2

Edit source code using Notepad ++.

Close the file when you’re done taking notes of what can be improved with the webpage. Right-click on the same file (juan_file.html) and click Edit with Notepad++.

Page 50: Tm   1st quarter - 1st meeting
Page 51: Tm   1st quarter - 1st meeting

Step 3

Modify heading position.

To put the webpage heading in its proper place, look for <"h1">Matter<"/h1"> at the bottommost part of the body’s contents. Cut it and place it just below the start tag.

Page 52: Tm   1st quarter - 1st meeting
Page 53: Tm   1st quarter - 1st meeting

Step 4

Modifying table contents.

All table data are under the wrong columns. Analyze the code for tables and put the data on their proper columns. In order to do this, rearrange the (table data). The first should be an item under the first column (Solid), the second data is an item under the Liquid column and the third should belong to the Gas column. Cut and paste to change their positions in the code.

Page 54: Tm   1st quarter - 1st meeting
Page 55: Tm   1st quarter - 1st meeting

Step 5 Modifying image attributes.

Images are also displayed in the webpage and are placed inside the tables. Some images cannot be seen but some are visible. Src is the only attribute used in the code. This attribute contains the URL of the image that you want to be displayed on your webpage. For all the images to appear, make sure that the spelling of the attribute (src) is correct, no other attribute can be used to contain the URL of the image but the src, and the image URL is correct especially the file format (to know the file format of the image

check the Juan’s File folder where the images are placed).

Page 56: Tm   1st quarter - 1st meeting
Page 57: Tm   1st quarter - 1st meeting

Step 6

Modifying link attributes.

Some links are not directing to another page. The syntax for links is Link Text. Make sure that the href attribute is the only one used in all link tags. Also, check if all URLs are working.

Page 58: Tm   1st quarter - 1st meeting
Page 59: Tm   1st quarter - 1st meeting

Step 7

Modifying text format

The texts on the webpage are all on one paragraph. To make it more readable, use line breaks and separate the paragraphs/sentences which should not be grouped together using the tag.

Page 60: Tm   1st quarter - 1st meeting
Page 61: Tm   1st quarter - 1st meeting

Step 8

Save and finalize file.

When done with all the modifications, click File > Save. Open juan_file.html from the Juan’s File folder to check your work if there are still modification that needs to be done. The webpage that you edited should look something like the image on the right. If you wish to add a little design/style to you work, you can do so.

Page 62: Tm   1st quarter - 1st meeting