HTML stands for Hypertext Markup Language. Basically, it’s a code that represents a document on the web. HTML Codes are the base of nearly every website on the web.  This page contains HTML page structure, image codes, text effects, background codes, and some other use of codes, as well as an introduction to HTML. These are very easy to understand and use.

HTML codes are the language a browser uses to display a website. It is also what designers use to create web pages, text, tables, and more. HTML can do a lot of things, in addition to simply creating a website.

This web page is made up of HTML codes & your web browser is reading these codes & displaying the colors, text, links, & tables.

Meaning HTML Codes:

-> HTML5 – HTML5 and it is a new elements make for the most beautiful HTML yet.

-> DOCTYPE – HTML5 has the best DOCTYPE ever

-> Indentation – Code is indented to show parent/child relationships and emphasize hierarchy.

-> Charset – Declared as first thing in the head, before any content.

-> Title – Title of the site is simple and clean. Purpose of page is first, a separator is used, and ends with title of the site.

-> CSS – Only one single stylesheet is used (media types declared inside stylesheet), and only served to good browsers. IE 6 and below are served a universal stylesheet.

-> Body – ID applied to body to allow for unique page styling without any additional markup.

-> JavaScript – jQuery (the most beautiful JavaScript library) is served from Google. Only a single JavaScript file is loaded. Both scripts are referenced at the bottom of the page.

-> File Paths – Site resources use relative file paths for efficiency. Content file paths are absolute, assuming content is syndicated.

-> Image Attributes – Images include alternate text, mostly for visually impaired uses but also for validation. Height and width applied for rendering efficiency.

-> Main Content First – The main content of the page comes after basic identity and navigation but before any ancillary content like sidebar material.

-> Appropriate Descriptive Block-Level Elements – Header, Nav, Section, Article, Aside… all appropriately describe the content they contain better than the divs of old.

-> Hierarchy – Title tags are reserved for real content, and follow a clear hierarchy.

-> Appropriate Descriptive Tags – Lists are marked up as lists, depending on the needs of the list: unordered, ordered, and the underused definition list.

-> Common Content Included – Things common across multiple pages are inserted via server side includes (via whatever method, language, or CMS that works for you)

-> Semantic Classes – Beyond appropriate element names, classes and IDs are semantic: they describe without specifying. (e.g. “col” is much better than “left”)

-> Classes – Are used any time similar styling needs to be applied to multiple elements.

-> IDs – Are used any time an element appears only once on the page and cannot be targeted reasonably any other way.

-> Dynamic Elements – Things that need to be dynamic, are dynamic.

-> Characters Encoded – If it’s a special character, it’s encoded.

-> Free From Styling – Nothing on the page applies styling or even implies what the styling might be. Everything on the page is either a required site resource, content, or describing content.

-> Comments – Comments are included for things that may not be immediately obvious upon reviewing the code.

-> Valid – The code should adhere to W3C guidelines. Tags are closed, required attributes used, nothing deprecated, etc.

HTML Animation Codes & Image Effects:

Opacity Filter using HTML:

-> <img src=”Your Photo’s URL Goes Here” style=”filter:alpha(opacity=50)”>

HTML code to add image to web page:

-> <img src=”URL FOR YOUR PICTURE HERE”>

HTML to center your picture:

-> <center><img src=”URL FOR YOUR PICTURE”></center>

HTML code to adjust the size of your picture. Just change the width or height:

-> <img src=”URL FOR YOUR PICTURE” width=”155″ height=”135″>

HTML Code to make pictures into a scrolling marquee:

-> <marquee><img src=”YOUR URL WHERE YOU HOST YOUR IMAGE HERE!”></marquee>

HTML Image Link: How to make a picture into a clickable link:

-> <a href=”URL YOU WANT USERS TO GO TO”><img src=”URL FOR YOUR PICTURE”></a>

HTML Text Effects

These HTML text codes are great for changing the style, color, and format of the text.  Using HTML with text is a great way to really make a sentence or word stand out. HTML text effects are usually very easy to use, and we can change the text with just a small change in the code.

To Center Your Text:

-> <center>YOUR TEXT GOES HERE</center>

To Right Align Your Text:

-> <p align=”right”>YOUR TEXT GOES HERE</p>

To Left Align Your Text:

-> <p align=”left”>YOUR TEXT GOES HERE</p>

To Justify Your Text:

-> <p align=”justify”>YOUR TEXT GOES HERE</p>

To Bold Your Text:

-> <b>YOUR TEXT GOES HERE</b>

To Italicize Your Text:

-> <I>YOUR TEXT GOES HERE</I>

To Underline Your Text:

-> <u>YOUR TEXT GOES HERE</u>

Changing Text Size:

-> <font size=”24″>YOUR TEXT HERE</font>

HTML for Changing Text Color:

-> <p><font size=”4″ color=”#FF0000″>YOUR TEXT HERE</font></p>

HTML Background Codes

Background HTML codes are great if you want to change the background style of your website.

-> With this property, you can set/return one or more of the following (in any order):

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background-size
• background-origin
• background-clip

Value	Description
color	Sets the background color of an element
image	Sets the background image for an element
repeat	Sets how a background image will be repeated
attachment	Sets whether a background image is fixed or scrolls with the page
position	Sets the starting position of a background image
size	Sets the size of a background image
origin	Sets the background positioning area
clip	Sets the painting area of a background image

– Swapna Sagarika Swain