WEB DESIGN HTML BASICS

IntroductionWhat is HTML?HTML is a language for describing web pages.HTML stands for Hyper Text Markup LanguageHTML uses markup tags to describe web pagesHTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag

HTML Format

HTML ElementsHTML documents are defined by HTML elements.An HTML element is everything from the start tag to the end tag:

Start tagElement contentEnd tagThis is a paragraphThis is a link

HTML AttributesHTML elements can have attributesAttributes provide additional information about the elementAttributes are always specified in the start tagAttributes come in name/value pairs like: name="valueFor example, HTML links are defined with the tag. The link address is provided as an attribute:This is a link

HeadingsHTML to TagsThe to tags are used to define HTML headings. defines the largest heading and defines the smallest heading.ExampleThis is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

Horizontal lineHTML TagThe tag creates a horizontal line in an HTML page.The hr element can be used to separate content in an HTML page.

AttributeValueDescriptionalignLeftCenterRightSpecifies the alignment of a hr elementsizePixels or %Specifies the height of a hr elementwidthPixels or %Specifies the width of a hr element

HTML Tag ListsHTML TagSamples

ParagraphsHTML ParagraphsParagraphs are defined with the tag.The p element automatically creates some space before and after itself.

This is some text in a paragraph.

AttributeValueDescriptionalignLeftCenterRightSpecifies the alignment of a hr element

HTML Formatting TagsText Formatting Tags

TagDescriptionDefines bold textDefines big textDefines emphasized textDefines italic textDefines small textDefines strong textDefines subscripted textDefines superscripted textDefines inserted textDefines deleted text

HTML StylesThe style attribute is a new HTML attribute. It introduces CSS to HTML.The purpose of the style attribute is:To provide a common way to style all HTML elements.HTML Style Examplesstyle="background-color:yellow"style="font-size:10px"style="font-family:Times"style="text-align:center"

Style ExamplesBackground Color

Font Family, Color and Size

Text Alignment

HTML ListsUnordered ListsAn unordered list is a list of items. The list items are marked with bullets (typically small black circles).An unordered list starts with the tag. Each list item starts with the tag. Coffee Milk

HTML ListsDifferent Unordered ListsDisc bullets listApplesBananasLemonsOranges

HTML ListsDifferent Unordered ListsCircle bullets list Apples Bananas Lemons Oranges

HTML ListsDifferent Unordered ListsSquare bullets list:Apples Bananas Lemons Oranges

HTML ListsOrdered ListsAn ordered list is also a list of items. The list items are marked with numbers.An ordered list starts with the tag. Each list item starts with the tag. Coffee Milk

HTML ListsDifferent Ordered ListsNumbered list: Apples Bananas Lemons Oranges

HTML ListsDifferent Ordered ListsLetters list: Apples Bananas Lemons Oranges

HTML ListsDifferent Ordered ListsLowercase letters list Apples Bananas Lemons Oranges

HTML ListsDifferent Ordered ListsRoman numbers list: Apples Bananas Lemons Oranges

HTML ListsDifferent Ordered ListsLowercase Roman numbers list: Apples Bananas Lemons Oranges

The image tagIn HTML, images are defined with the tag. The tagis empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:

The image tag

AttributeValueDescriptionaligntop bottom middle left right Specifies the alignment of an image according to surrounding elements borderPixelsSpecifies the width of the border around an image heightPixels or %Specifies the height of an image widthPixels or %Specifies the width ofan image

HTML Hyperlinks (Links)The HTML tag defines a 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.

HTML Hyperlinks (Links)The most important attribute of the element is the href attribute, which indicates the links destination.By default, links will appear as follows in all browsers:An unvisited link is underlined and blueA visited link is underlined and purpleAn active link is underlined and red

HTML Link SyntaxLink text ExampleVisit W3Schools Clicking on this hyperlink will send the user to W3Schools' homepage.Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

HTML Links - The target AttributeThe target attribute specifies where to open the linked document.The example below will open the linked document in a new browser window or a new tab:Visit W3Schools!

HTML Links - The id AttributeThe id attribute can be used to create a bookmark inside an HTML document.Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.

HTML Links - The id AttributeAn anchor with an id inside an HTML document:Useful Tips Section Create a link to the "Useful Tips Section" inside the same document:Visit the Useful Tips Section Or, create a link to the "Useful Tips Section" from another page: Visit the Useful Tips Section

TablesTables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Sample Code row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Attributes

AttributeValueDescriptionalignleft centerright Specifies the alignment of a table according to surrounding text bgcolorPixelsSpecifies the background color for a table borderPixelsSpecifies the width of the borders around a table cellpaddingPixelsSpecifies the space between the cell wall and the cell content cellspacingPixelsSpecifies the space between cells widthPixels%Specifies the width of a table

Tables and the Border AttributeIf you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. Row 1, cell 1 Row 1, cell 2

Headings in a TableHeadings in a table are defined with the tag. Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Empty Cells in a TableTable cells with no content are not displayed very well in most browsers. Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).To avoid this, add a non-breaking space () to empty data cells, to make the borders visible:

Cells that spans more than one column

Cell that spans two columns: Name Telephone Bill Gates 555 77 854 555 77 855

Cells that spans more than one rowCell that spans two rows: First Name: Bill Gates Telephone: 555 77 854 555 77 855

FramesThe tag defines one particular window (frame) within a .Each in a can have different attributes, such as border, scrolling, the ability to resize, etc.

Attributes

AttributeValueDescriptionframeborder0 1Specifies whether or not to display a border around a framelongdescURLSpecifies a page that contains a long description of the content of a framemarginheightpixelsSpecifies the top and bottom margins of a framemarginwidthpixelsSpecifies the left and right margins of a framenamenameSpecifies the name of a framenoresizenoresizeSpecifies that a frame is not resizablescrollingyes no autoSpecifies whether or not to display scrollbars in a framesrcURLSpecifies the URL of the document to show in a frame

FramesetThe tag defines a frameset.The element holds one or moreelements. Each element can hold a separate document.The element specifies HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.Not supported in HTML 5

Attribute

AttributeValueDescriptioncolspixels % *Specifies the number and size of columns in a framesetrowspixels % *Specifies the number and size of rows in a frameset

Using FramesExample

Using frames within a frameset

Using frameset without resizing

Navigation FrameThis example demonstrates how to make a navigation frame. A navigation framecontains a list of links with the second frame as the target. The second frame willshow the linked document.

Sample navigation using framesMain Page

Link frameFrame aFrame bFrame c

iframeThe tag specifies an inline frame.An inline frame is used to embed another document within the current HTML document.Supported by HTML5

Attributes

AttributeValueDescriptionalignLeft, right, top middle, bottomSpecifies the alignment of an according to surrounding elementsframeborder1 0Specifies whether or not to display a border around an heightPixelsSpecifies the height of an longdescURLSpecifies a page that contains a long description of the content of an marginheightPixelsSpecifies the top and bottom margins of the content of an marginwidthPixelsSpecifies the left and right margins of the content of an nameNameSpecifies the name of an scrollingYes, no, autoSpecifies whether or not to display scrollbars in an seamlessNewseamlessSpecifies that the should look like it is a part of the containing documentsrcURLSpecifies the address of the document to embed in the srcdocNewHTML_codeSpecifies the HTML content of the page to show in the widthpixelsSpecifies the width of an

Using iframe

ExampleSet Height and Width

Remove the Border

Use iframe as a Target for a Link W3Schools.com