Terminology
HTML
stands for “Hypertext Markup Language which is the language used to create webpages.
Hypertext
refers to the hyperlinks that an HTML page may contain.
A hyperlink
is a word, phrase, or image that you can click on, to jump to a new location within the current website or to an external site. Text hyperlinks are often blue and underlined, but don’t have to be. When you move the cursor over a hyperlink, the cursor should change to a pointer which when clicked will cause a new location to open.
Markup language
refers to the tags that are used to define the page layout and elements within the page. A tag is nothing more than a label that is used to pass information to the WWWbrowser describing the purpose of each element on a web page.
Web pages
are structured with HTML. Imagine a building with no structure; with no beams, columns or foundation – it would collapse. Web pages are the same. HTML structures and holds the page together. This should be its only function. Web pages make up the World Wide Web. These pages are written in HTML hypertext markup language, which is translated by your Web browser.
A web page is not the same thing as a web site.
A web site
is a collection of web pages.
Elements
Elements are the small pieces that define the structure of a web page, such as: <p>, <h1>, <span>, <strong>, <table> etc.
For a complete list go to https://developer.mozilla.org/en-US/docs/Web/HTML/Element. There are around 140 elements in total, but you will never use them all. If you study them carefully, you will see that they can be learned in groups, so for instance, if you are building tables, then you should learn the elements for tables. Just build your knowledge step by step.
Tags
Tags are made up of an opening tag < > and a closing tag </ >. For instance a paragraph opens with a <p> and closes with a </p>. The ‘p’ is the content of the tag.
Attributes
Attributes are additional information added to a tag. This information will be inserted here <div ^^^> as in <div class = ‘menu’>. By itself ‘div’ has not much meaning, now this particular div is only for menu items.
HTML Document Structure
Text Editor
Unfortunately, you cannot use a word processing program to write code because these programs already are full of their own code that will be in conflict with anything you write. You must therefor use what is called a ‘text editor’. Text editors have only code that is specific to building webpages, and even that code can be overwritten by you at any time, for any reason. It is recommended that Windows users use the Notepad++ and Mac users Text Wrangler. These are both free versions and you can upgrade later when you know what you are doing.
<!doctype html>
All webpages must start with this tag. It informs the web browser that you will be writing HTML5.
<html> </html>
Everything between the opening and closing <html>...</html> tag is code written for the browser. This will include the ‘head’, ‘body’ and ‘footer’. Anything outside these tags will not be recognised by the browser.
<head>...</head>
Just think of your head. Many things are going on there, but nobody can see them. The ‘head’ on your webpage is no different. This will include instructions to the program like styles, hyperlinks, and meta tags etc.
<body>...</body>
All the code you write in the body will be translated into what the viewer can see on the computer screen.
Self-closing elements
These do not require a closing tag because they are not enclosing anything. They include:
<meta> <br> <link> <hr> <img> and a few others.
HTML Example -
used to define a basic webpage with a title and a single paragraph.
<!doctype html>
<html lang=”en”>
<head>
<title>Learn to Code – HTML & CSS </title>
<meta charset=”utf-8”>
</head>
<body>
<h1>Hello World</h1>
<p>This is an example of a paragraph wrapped in HTML paragraph tags.</p>
</body>
</html>
Notes
“<!doctype html>” in the first line defines the document as being written in HTML5.
Properly formatted HTML pages contain, at a minimum, the <html>, <head>,
<body>...</body> tags.
Indentation –
Element indention is optional, but the above represents an acceptable standard that most programmers recognise. This makes it easy for you and/or your colleagues to read your code which can be important when revisiting a site after a long break.
Nested
this is an important term for you to be familiar with, and to thoroughly learn. In the above table the h1 and p tags are ‘nested’ in the body tag. This creates a parent/child relationship and is fundamental to all the CSS you will be learning later on in these lessons. In the above case, the <body> tag is the parent and the <h1> and <p> tags are children.
CSS
Fundamental CSS Terms
If HTML is the structure of your HTML, then CSS is the painter and decorator. Everything in the HTML structure can be modified with CSS; no exceptions. If you want to modify the <h1> tag so that it is placed one inch from your left margin, at 64 pixel tall, in bright red colour and italic, bold then CSS will do exactly what you ask.
Selectors
In the above example we mentioned modifying the <h1> tag. We would do this by selecting the <h1> tag using CSS.
h1{ ... }
The h1, in this case, is the selector.
Properties
Every element has properties such as color, size, background, background color, positioning etc
p{
color: ...;
font-family: ...;
}
The property is followed by the : (colon)
Values
p{
color: red;
font-size: 24px;
}
The value is followed by a ; (semi-colon)
Selectors
The three common selectors that you will be working with are:
Type Selector
These target by selector type only i.e.
html : <div> ... </div>
css : div { ... }
Class Selector
These target groups i.e computers, textiles, fish
html: <div class=” beginners “> ... </div>
css : .beginners{ ... }
ID SeWWlector
These target individuals i.e one human by name
html: <div id=”medwayboy”> ... </div>
css: #medwayboy{ ... }