HTML is the structure of the web.
Every website is made up of HTML pages, which is made up of elements and attributes that can be manipulated and changed to the developers design.
Choosing a text editor:
A text editor is what is used to write out the code.
There are plenty to choose from on the web, and looking between them all can take months.
The one I have found most useful is brackets, its free and easy to use.
Basic Structure of the HTML page:
** REPLACE "" WITH <> **
"!DOCTYPE html"
Every HTML document has to start with this declaration so that the browser knows that it is an HTML doc.
"html"
"head"
The head tags contain all the information that the user cannot see i.e. links to external styling pages.
"/head"
"body"
The body tags contain all the information that the user can see.
"/body
"/html
Classes and IDs:
Classes and IDs are attributes that go within the elements of an HTML page and give them a unique 'name'. They can then be called by the css pages or JS pages to be styled however the web designer wants them to be.
Multiple elements can have the same class name.
In the style sheet it is called using the dot notation i.e .ClassName
In the JavaScript style sheet it is called using the document.getElementsByClassNames("ClassName");
Only one element can have an ID name, making them more unique
In the CSS styling sheet is it called using the pound notation i.e. #IDName
In the Javascript style sheet it is called using the document.getElementByID("IDName");
Useful elements and attributes:
There are two different types of elements; semantic or non-semantic.
Non-semantic elements tell the user nothing about its contents. e.g. div and span.
Div elements are block level elements and are used expansively to help layout the website because they can be styled so extensively. i.e. width, height, background color and so on can be added to its style.
Span elements are inline elements that are used to isolate a particular content within another element, so that it can be styled seperately.
Semantic elements have a meaning and tell the user information about its contents:
< a > - creates a hyperlink to other pages, files, locations within the same page, emails etc.
< ul > - unordered list.
< ol > - ordered list.
< li > - list item. Child of ul or ol
< img > - image tag. An empty element, it has no closing tag. Has to include the src attribute. Recommended to include the alt attribute.
Some useful attributes are:
href = #name - the section with the id = “name”. href attributes go inside the anchor tags!
href = URL - a new webpage. href attributes go inside the anchor tags!
Target = _blank - to open the links in a new browser. Goes inside anchor tag.
src=”image pathway” - tells the browser where to find the image. Goes inside the img tag.
Alt=”descriptive text for image” - used in case the image link is broken.