HTML|tags|Free|For beginners
Basic Hypertext Markup Language
(HTML)
HTML Introduction
HTML is the basic language of the web and is easy to learn and understand! With some basic
the knowledge you can decipher seemingly complex pages and break them into their individual parts
to better understand and control your e-Community sites.
Is essence, HTML describes what a page should look like when viewed through a web browser such
a Mozilla Firefox, Google Chrome, Safari, and Internet Explorer.
HTML is a markup language that is comprised of a set of tags that describe the document’s
content. HTML files are simple text files that contain plain text and tags and typically have the file
extension .html or .htm. They are commonly referred to as web pages.
HTML Tags
HTML Tags are keywords or tag names surrounded by angle brackets or
< > and normally come in pairs like this: <tag> and </tag>. The first tag in a
pair is the opening tag and the second tag is the closing tag. The closing tag is
written the same way as the opening tag with a forward slash ( / ) to say “stop
doing this.”
For Example:
<tagname> content </tagname>
Your HTML document should always contain <html> to signify the beginning of the HMTL
content and </html> to signify the end. Without this tag, the document is only text.
HTML Editors
HTML can be created or edited in many different types of editors, many of which are free and
work incredibly well. In reality, all you need is a simple text editor, like Microsoft Notepad, or
TextEdit on a Mac to get started. An HTML editor makes things much easier by color coding
different items making it simple to find specific items or locate errors.
Free Editors:
Notepad ++ - http://notepad-plus-plus.org/
Brackets - http://brackets.io
CoffeeCup - http://www.coffeecup.com/free-editor/
HTML Basics
Working with HTML is much like working with word processing software. Once your content is
written you simply start at the beginning of the content, highlight to the end of the content and
select your formatting option, in the example below, you would use the ‘B’ button to make this
text appears Bold.
HTML Works in much the same way in that we use Tags to identify the content instead of
highlighting it.
<b>Bold</b> or <tagname> content </tagname>
HTML Elements
An HTML element is everything from the opening tag to the closing tag. The element
content is everything between the opening and closing tags. There are also special
elements that are closed in the start tag such as a line break. Most HTML elements
can have attributes or special characteristics that describe the element.
Start Tag Element Content End Tag
<html> All of your HTML code </html>
<head> Special information about your page </head>
<body> The content of your page </body>
<h1> to <h6> Headings </h1> to </h6>
<hr> Adds a horizontal rule none
<p> This is a paragraph </p>
<a href=”default.html”> This is a link </a>
<br /> This is a line break
<!-- This is a comment -->
Special Elements
While there are a number of special HTML elements, such as the <br /> tag
mentioned above, there are some other special elements you should know.
HTML Lines
The HTML horizontal rule can be used to divide content areas and uses the
<hr> tag. Inserting the <hr> tag will draw a horizontal line across your content
area.
HTML Comments
Comments can be inserted into HTML code to make it more readable and to
explain to the reader of your code what it is you plan to do or what you have
changed. It’s always good practice to comment on your HTML code.
Comment elements are written as follows and do not show on your rendered
page.
<!-- This is a comment -->
The <!-- is the beginning of the comment and the --> is the end. Everything
typed within these tags will be invisible to the viewer unless the source code is
viewed.
HTML “White Space”
Browsers will ignore all “white space” in your HTML document. White space
can be added to make your code more human-readable, but it will be
completely ignored when the browser renders the document. Keep this in
mind when you write your code. Everything is controlled by a tag. Tags tell the
browser what to do, if you instruct nothing, nothing will result.
HTML Attributes
HTML elements can have attributes that provide additional information about
an element. Attributes are always assigned in the opening tag and always contain
a name and value pair. The value must be contained in double-quotes.
<tag name=”value”> Content </tag>
Attribute Description
Class Specifies one or more class names for an element (CSS)
Id Specified a unique id for an element
Style Specifies an inline CSS style for an element
Title Specifies extra information about an element (displays as tooltip)
A common example of a complete element:
<a href=”https://ugesolution.blogspot.com/”> ugesolution.com </a>
HTML Headings
HTML headings are defined with <h1> through <h6> tags. <h1> defines the most
important heading while <h6> defines the least important heading. The browser
used to view the headings will automatically add space before and after each
heading. It is very important that you use headings for your content headers only
and not simply to make any text larger. Search engine crawlers will use your
heading tags to organize your content by order of importance. <h1> should always
be used for your most important topics, followed by <h2> and so on.
HTML Paragraphs
HTML Documents are divided into paragraphs. Paragraphs are defined with the <p>
tag. Browsers will automatically add white space above and below a paragraph tag.
Make sure to include the closing </p> tag to complete the paragraph and start the
next. Below is an example paragraph.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra
metus a arcu vulputate aliquet. Nulla ac metus ut neque fringilla posuere.
Pellentesque quis viverra nisl.</p>
HTML Formatting
HTML also uses tags for formatting text, much like you would with a word processing
program. Text formatting means simple things like bold, italic, and underline. You
should note, however, that underlining text in an HTML document is terribly poor
form as it can be misconstrued as a link. All formatting tags must be closed.
Tag Description
<b> Defines bold text
<strong> Also defines bold text
<i> Defines italic text
<em> Also defines italic text
<sub> Defines subscript text
<sup> Defines superscript text
<blockquote> Defines a section of text that will be indented
Example:
<p>Text formatting means simply things like <b>bold,</b><i> italic,</i> and
<u>underline.</u>
HTML Links
The HTML <a> tag defines an anchor or hyperlink.
A hyperlink (or link) is a word, group of words or image that you can click on to
jump to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little
hand.
The most important attribute of the <a> element is the href attribute, which
indicates the link’s destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Link Syntax
An HTML link is required to have an attribute in order to have a function. The
<a> tag will surround the content you wish to effect, whether it be an image,
text or any other HTML element. The value of the attribute must be contained
in quotes.
Attribute Value
href Specifies the destination of the link
target Specifies the browser window to display the link
id Specifies a bookmark inside a document
title Displays a tooltip (not required)
Examples:
<a href=http://www.andar360.com> Andar360.com</a>
<a id=”top”>Top of the page</a>
<a href=”#top”>Go to the top of the page</a>
<a href=”home.html” target=”_parent”>Go to Home Page</a>
Target Attribute
There are five values for the target attribute. The target attribute specifies
where to open the linked document and is supported in all major browsers. As
with all attributes the value must be contained in quotes.
Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was
clicked
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
frame named Opens the linked document in a named frame
HTML Head
The HTML <head> element is a special container element to contain all of the head-specific
elements. Elements inside the head can include scripts, tell the browser
where to find external information such as stylesheets or Javascripts, and provide
search engines with descriptive information about the content of the page.
Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines the default address of the page
<link> Links to the document to an external resourse
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
HTML Images
Images are displayed in HTML by use of the <img> tag. The <img> tag does not need
to be closed. The <img> tag has multiple attributes to define what to display and
how it should be displayed. As with other attributes, values must be contained in
quotes.
HTML Tables
A table is comprised of rows and columns, similar to a spreadsheet, and can be quite
complex. Tables consist of a number of tags and will always start with the <table>
tag. Like many other tags the table tag can have attributes assigned to it such as
width and follow the same rules as other attributes. The <table> tag signifies the
start of a table but will need other tags to assign rows and columns inside it.
Table Rows and Columns
Table Rows are defined using the <tr> tag and columns are defined using the <td>
tag. The <td> tag stands for ‘Table Data’ and can contain text, images, links, lists or
any other HTML element. Below is an example of a simple table in HTML.
<table>
<tr>
<td>Row One – Column One</td>
<td>Row One – Column Two</td>
</tr>
<tr>
<td>Row Two – Column One</td>
<td>Row Two – Column Two</td>
</tr>
</table>
HTML Output:
Row One –Column One Row One – Column Two
Row Two – Column One Row Two – Column Two
HTML Lists
There are two types of lists in HTML, Ordered and Unordered. Quite simply, the two
are best described as Numbered and Bulleted, respectively. Lists contain two types
of tags: The type of list: Ordered <ol> and Unordered <ul> and the List items <li>.
Unordered List
List Item
List Item
List Item
Ordered List
1. List Item
2. List Item
3. List Item
Example:
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
HTML Blocks
HTML elements have a certain level of control over how they are displayed. For
instance, the <p> tag will automatically place white space above and below its
opening and closing tag while a <b> tag will only affect the content it surrounds.
These two types of elements are called block-level and inline elements, respectively.
Block-level elements will normally start and end with a new line when displayed and
inline elements will not start a new line.
Thank you
No comments:
Post a Comment