What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages

Introduction A markup language combines text and extra information about the text, this extra information is contained in "tags," which are easily recognizable by the symbols. HTML is the standard for creating web pages with a collection of tags, or labels, for formatting information use on the web. HTML can be used on the desktop for formatting help files and documents.

Introduction The basic requirements for writing HTML are two:  a web browser  a good text editor. We can edit HTML files using an editor like FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file ex: notepad. When you save an HTML file, you can use either the.htm or the.html extension. Every file ending in.html will be opened by a web browser after you click, or double-click, on it.

Writing HTML Code Title of page This is my first homepage.

How to save and run HTML code in windows Start Notepad. Type in the given text Save the file as “anyname.htm". Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created select it and click "Open". Now you should see an address in the dialog box, which is showing your file path. Now Click OK, and the browser will display the page.

HTML Elements (TAGS) HTML tags are used to mark-up HTML elements. HTML tags are surrounded by the two characters.The surrounding characters are called angle brackets. 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. The text between the start and end tags is the element content. HTML tags are not case sensitive, means the same as. Use lowercase tags for future work. Tags can have attributes. Attributes provide additional information to an HTML element. Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.

HTML Elements (TAGS).. : This tag tells your browser the start and end of an HTML document... : This tag contains the header information, which is not displayed in the browser window... : This tag contains the title of your document. The title is displayed in your browser's caption... : This tag contain the text that will be displayed in your browser.

HTML Background attributes The tag has two attributes where you can specify backgrounds. The background can be a color or an image. Bgcolor: The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name. Ex: The lines below all set the background-color to black. or Background: The background attribute specifies a background- image for an HTML page. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window. Ex:

HTML Elements (TAGS) Cont.... : This tag defines the paragraphs in your browser. HTML automatically adds an extra blank line before and after a paragraph : This tag is used when you want to end a line, but don't want to start a new paragraph. This tag is an empty tag. It has no closing tag. : The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

Text Formatting Tags.. : Defines the sizes, faces and colors of the fonts on your web page. It has 3 attributes: face: define the type of font (name) size: define the size of font (numeric value) color: defines the color of font (name/RGB/hexadecimal).. : Defines bold text.. : Defines big text..</em: Defines emphasized text.. : Defines italic text.. : Defines small text.. : Defines strong text.. : Defines subscripted text.. : Defines superscripted text.. : defines strike tag

HTML Alignment and pre formatted text tags.. : indicates a section that is center aligned... : indicates a section that is left aligned... : is one the handiest tags in the HTML toolbox. It marks the text as “preformatted" – all the spaces and carriage returns are rendered exactly as you type them.

The HTML Style Attribute The purpose of the style attribute is: To provide a common way to style all HTML elements. For eg: This is a heading This is a paragraph.

HTML Style Example - Font, Color and Size The font-family, color, and font-size properties defines the font, color, and size of the text in an element: Eg: A heading A paragraph.

Deprecated Tags and Attributes In HTML 4, several tags and attributes are deprecated. Deprecated means that they will not be supported in future versions of HTML and XHTML. Following tags and attributes should be avoided. Tags: ; and ; and Attributes Align;Bgcolor;Color

HTML Lists.. : defines an unordered list of items. The list items are marked by bullets... : defines an ordered list of items. The list items are marked with numbers... : each list item starts with this tag... : defines a Definition Lists. This is a list of terms and explanation of the terms... : each definition-list term starts with this tag... : Each definition-list definition starts with this tag.

Horizontal Line tag :This tag draws a horizontal line (a "horizontal rule") across the page. It has no end tag. It indicates a division in the page. Stuff before the rule is in a different "section" from the stuff after. It has 4 optional attributes: size: define the height of line (numeric value) width: define the width of line in pixels. (numeric) align: define the alignment of line. (left/right/center) color: define the color of line (name/RGB/hexadecimal)

The Anchor Tag.. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. the Href Attribute: Text to be displayed The Target Attribute: It define where the linked document will be opened. The line below will open the document in a new browser window. Visit my homepage!

Inserting Image In HTML, images are defined with the tag. It has no closing tag. the Src (source) Attribute: To display an image on a page. The value of the src attribute is the URL of the image you want to display on page.. The Alt (alternate text) Attribute: The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is text:

HTML Tables.. : Tables are defined with this tag... : define a row in the table... : each row is divided into data cells. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc... : this tag defines headings in a table the Border Attribute If you do not specify a border attribute the table will be displayed without any borders. To display a table with borders, the border attribute is used (numeric value).

HTML Frames To display more than one HTML document in the same browser window. Each HTML document is called in a frame, and each frame is independent of the others... : defines how to divide the window into frames. Each frameset defines a set of rows or columns. The values of the rows/cols attributes is the amount of screen area each row/column will occupy... : defines what HTML doc to put into each frame. Frame tag has partition only, not the body tag (or page definition).

HTML Forms.. : A form is an area that can contain form elements. Form elements are elements that allow the user to enter information in a form... : The type of input is specified with the type attribute. The value of types are text, radio, button, submit, textarea, checkbox, select (option).

Assignment In this assignment, you will create three linked web pages on you and your interests. Page 1- Home page: Create a webpage which explains who you are. It should contain the following topics, reflecting your personality: – interests – hobbies – favorites (or current) reading list – favorite movie list – current academic – social interests and activities Page 2 - Schedule page: Using tables, create your current work and school schedule. Page 3 - Interests page: The third page containing your ten favorite websites with a short paragraph about them (two sentences). clear links to other portions of your webpage.

Assignment cont… Use the following (minimum) formatting or web elements in your pages: – Paragraph breaks and line breaks – Horizontal rule(s) – At least one table – An un-ordered list (this is an un-ordered list) – Use 2 colors in the background or in the tables within the same page – At least one image per page.