What is HTML
Hypertext Markup Language is a standardized system for tagging text files to achieve fonts, colour, graphics and hyperlink effects on the World Wide Web.
1. My First HTML Code
You should always start with HTML, head, title, h1 and body tags. Save the file as myfirsthtmlcode.html and click on the file to see results in the browser as below. As you can see you need an opening <> and a closing tag to wrap the element </>.
2. Exploring the document
All HTML documents must start with a <!DOCTYPE HTML> declaration. The declaration is not an HTML tag. It is information for the browser about what document type to expect.
HTML attributes (in blue) provide additional information about HTML elements and usually come in name/value pairs like: name="value"
3. Headings
HTML headings are titles or subtitles that you want to display on a webpage. Copy and paste 6 h1 tags and change to 2-6 tags. You will see the below results in the browser
4. Comments and line breaks
To insert single line breaks in your text use the br tag. Add 5 br tags between your h1 and h2 to see the results.
You can add comments to your HTML source by using the following syntax:
Comments are not displayed in the browser and they can help document your code.
5. Paragraph, strong, italic and blockquotes
Get some dummy text over at lipsum.com. Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
p tag element defines a paragraph. the strong tag is used for text with strong importance. i tag element displays in italic. blockquote tag specifies a section that needs quoting.
6. Images
img tags are used to embed an image in an HTML page.
- Right-click on an image from the internet and click "save as"
- Save the image into a folder called "images"
- Write the code as above with the width attribute of your choosing.
7. Links
Anchor tags defines a hyperlink, which links from one page to another.
8. Clickable images
Delete "click me" and replace it with your img tag.
9. Tables
Tables allow you to arrange data into rows and columns. The table should look like below.
10. Forms
A form is used to collect user input. The user input is sent to a server for processing.
11. Lists
Lists allow you to group a set of related items in lists.