- What is HTML?
- 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
- HTML Tags
- HTML tags are keywords 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
- Start and end tags are also called opening tags and closing tags
- HTML Documents = Web Pages
- The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages.
- The text between <html> and </html> describes the web page
- The text between <body> and </body> is the visible page content
- The text between <h1> and </h1> is displayed as a heading
- The text between <p> and </p> is displayed as a paragraph
- Editing HTML
- HTML can be written and edited using many different editors like Dreamweaver and Visual Studio.
- However, in this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe using a plain text editor is the best way to learn HTML.
- Create Your Own Test Web
- If you want to create a test page on your own computer, just copy the 3 files below to your desktop.
(Right click on each link, and select "save target as" or "save link as" htm or html)
- Heading (From H1 to H6, the biggest is H1 and the smallest is H6)
- Paragraphs (<p>)
- Links (<a>)
- Images (<img src="w3schools.jpg" width="104" height="142" />)
HTML Element Syntax
- An HTML element starts with a start tag/opening tag
- An HTML element ends with an end tag/closing tag
- The element content is everything between the start and the end tag
- Some HTML elements have empty content
- Empty elements are closed in the start tag
- Most HTML elements can have attributes
- HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
- Id, Class, Title, style
The <hr /> tag creates a horizontal line in an HTML page.
Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
<!-- This is a comment -->
HTML Line Breaks
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph
HTML Formatting Tags
HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
Styling HTML with CSS
CSS can be added to HTML in the following ways:
- in Cascading Style Sheet files (CSS files)
- in the <style> element in the HTML head section
- in the style attribute in single HTML elements
HTML Hyperlinks (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.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:
- To create a link to another document, by using the href attribute
- To create a bookmark inside a document, by using the name attribute
It has attributes like (href, target, name, class, title)
HTML Images - The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and 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.
It has attributes like (alt, title, width, height, hspace, vspace)
Single image can include many links on it, each area on it has special links
It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
HTML Unordered Lists
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).
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
HTML Definition Lists
A definition list is a list of items, with a description of each item.
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list
- black hot drink
- white cold drink
HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
HTML Forms - The Input Element
The most important form element is the input element.
The input element is used to select user information.
An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.