-
Notifications
You must be signed in to change notification settings - Fork 0
1. Introduction to HTML
HyperText Markup Language (HTML) is the standard markup language used to create web pages or more specifically the content in webpages. The latest version is HTML 5.
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html> HTML tags most commonly come in pairs like <h1> and </h1> although some tags represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags).
All webpages contain an opening and closing html tag which are at the top and bottom of the page. Note closing tags include a forward slash / after the angle bracket.
All webpages also include head and body tags, again an opening and closing tag. Inside the body tag is the content you will see. The head tag contains content that you won’t see in a browser but will do some stuff like inform other computers what your webpage is about.
<html>
<head>
</head>
<body>
</body>
</html>
The head and body tags are indented or tabbed inside the html tag. Your webpage will work without these indents or tabs, however when you have a lot of tags, they will help you check if tags have matching closing tags also make you code easier to read.
The title is an example of content in the head tag. This title will not appear on the content of your webpage. The title is used by the browser which often shows the title on the tab for each page open in the browser. Search Engines such as Google use the title when displaying search results.
<head>
<title>Glasnevin National School</title>
</head>
HTML contains numerous tags to help you create content.
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>
You can use one or more of these headings. <h1> is often bigger than <h6> and the other tags are a size between these. Search engines will look for headings as being important text headings on a website and they will place more importance on a <h1> heading than a <h6> heading.
The HTML <p> element defines a paragraph.
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
All text inside a <p> tag will be displayed on a single line. If the line is wider than the browser, the text will flow onto a second line. Just like writing, if you want to force the browser to create another paragraph, you need to tell the browser that you want to do this by creating another paragraph of <p> tag for additional content. There is no limit to the amount of content in <p> tags, it can include a few words or a book. A book would not be very interesting to read in a single paragraph though.
IMAGES
In HTML, images are defined with the <img> tag.
The <img> tag is a bit special though. The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute defines the url (web address) of the image:
<img src="url" alt="some_text">
Example:
<img src="http://www.riai.ie/uploads/files/GlasnevinMuseum.jpg" alt="Glasnevin Museum" >
The code for this example is available here. The code is also available as part of a larger repository of files which you can download as a zip file and edit in Notepad++ or Text Wrangler from here.