tm 1st quarter - 1st meeting
Post on 12-Jan-2015
406 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML Basics
Engr. Esmeraldo T. Guimbarda Jr.
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.
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.
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.
Sample:
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.
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).
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:
Example:
Output:
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.
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:
Example:
Output:
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.
HTML Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
Syntax:
Example
Output:
HTML Paragraphs
An HTML Paragraph is defined by a <p> tag. Browsers automatically add some space (margin) before and after each <p> element.
Syntax:
Example:
Output:
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:
Example:
This is a linkOutput:
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:
Example:
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.
Example
Output:
Text Formatting
HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
Example:
Output:
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.
A table is divided into rows with the <tr> tag.
Header information in a table is defined with the <th> tag.
Each row is divided into data cells with the <td> tag. This tag can contain texts, links, images, lists, forms, other tables, etc.
Example:
Output:
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.
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).
Example
Output:
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.
Examples
Output:
Definition List
A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list.
Examples
Output:
Output
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.
Example
Output
HTML <span> Element
The HTML <span> element is an inline element that can be used as a container for text.
Example
Output:
Tools Needed?
Notepad++ - a free source code editor and Notepad replacement that supports several languages.
http://notepad-plus-plus.org/
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:
Activity: Step 1
Open the webpage file (juan_file.html) from \xampp\htdocs\juan folder and observe what is wrong with the webpage format.
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++.
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.
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.
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).
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.
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.
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.
top related