HTML
The following is far from an exhaustive listing of HTML tags and attributes. It is only intended as an introduction for beginners!
HTML, CSS and Javascipt all play vital and different roles in the modern web.
- HTML: The glue that brings the various pieces together. It is the HTML that loads the CSS and Javascript. HTML is the structure content of your webpage.
- CSS: Is all about making it look pretty. Most of the work for the layout and styling should be in the CSS.
- Javascript: Is where the action is. It brings the interactivity to your website.
The basic structure of a HTML document is:
<!doctype html>
<html>
<head>
<title>{{project.title}}</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="{{project.title}}">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="my-project.css">
<script type="text/javascript" src="my-project.js"></script>
</head>
<body>
<!-- insert your HTML content here -->
</body>
</html>
In this above example, the HTML for your page/project goes within the <body>...</body> tags.
Your javascript would be in a seperate file called my-project.js as denoted by the <script> tag src= property.
Your CSS would be in a seperate file called my-project.css as denoted by the <link> tag href= property.
HTML is a "tag" based language. The tags are instructions about the content of a webapge, enclosed in triangle brackets. For instance, these are some tags:
<h1>This is a heading of level 1</h1><h2>This is a subheading, level 2</h2><p>This is a paragraph</p>
Tags can also contain attributes, which contain information relevant to the content the tag is about. For example:
<img src='filename.jpg'>is an image tag, it will load the filename.jpg file from your website and display it.
Two crucially important attributes are id and class. These are what you will predominately use in your Javascript and CSS to access/modify your HTML. An id must be unique to the entire HTML document (ie: can not appear more than once), where as class is designed to be used multiple times, it can represent a group of things that are similar. For example:
<input type="text" id="firstName" class="input">
<input type="text" id="familyName" class="input">
<input type="text" id="email" class="input">
The rest of this chapter is a reference guide for some of the key "tags" in HTML you should be familiar with.
A elements
An 'anchor' tag is the name given to links in the web - those bits of blue text with the underline that you can click on. Generally, they are used to redirect the user to a new page, based on the address you indicate in the href attribute.
<a href="https://some-website.com/page/document">Description of link</a>
Attributes for an <a> tag:
href: destination for the hyperlinktarget: choice of _blank | _parent | _self | _top
DIV & SPAN elements
<div> and <span> are generic tags that can be used to divide your content into logical sections. They are useful for CSS purposes as you can "group" different elements together, so these can be used to create layout blocks etc. By default <div> will behave like a <p> and include a "new line" after it, where as <span> doesn't.
<div>This will behave like a paragraph</div>
<span>This will behave just as text within an existing line</span>
They don't really have any special attributes, though you would usually have id and/or class specified with these.
These tags might not seem like much, but <div> and <span> become incredibly important once you start adding CSS and Javascript into the mix. Because they are "generic" in nature, it means they can be used to organise page content into sections - either for styling with CSS or for attaching interactive programming through Javascript. As a result, you'll see these tags used a lot in later examples.
<img src="myphoto.jpg" alt="Profile photo">
<video poster="video-poster.jpg" src="my-video.mp4" controls autoplay>