web fundamentals html basics
DESCRIPTION
.TRANSCRIPT
Web Design Basics – Codeacademy 1
HTML BasicsWhy learn HTML?Every webpage you look at is written in HTML. You can think of HTML as the skeleton that gives a webpage its structure. HTML includes these symbols ‘<>’, and like any other language, it has it’s own special syntax.
HTML and CSSHTML stands for Hypertext Markup Language. Hypertext means ‘text with links in it’, and markup language makes the text do more than just sit on a page, e.g. turn text into images, links, tables etc.CSS – Cascading style sheets, is what makes webpages look pretty. Think of it as the skin and make up that covers the HTML.
Setting up HTML Always put <!DOCTYPE html> on the first line to tell the
browser what language it is reading. Always put <html> on the next line to start the document. Always put </html> on the last line to end the document.
Basic terminology Things inside <> are called tags. Tags nearly always come in pairs: an opening and a closing
tag.You can think of tags as being like parentheses: whenever you open one, you should close it.
Make the headEverything in the HTML file goes between the opening <html> and closing </html> tags. There are always two parts to a file, the head <head> and the body <body>.
The head has an opening <head> and closing </head> tag The head includes important information about the webpage,
such as its title The <title> is the words we see in the tab
Paragraphs in the bodyWhen we put content between tags, the entire bit is called an element. The content in the body is what will be visible on the actual page.
So far the document should look something like this…<!DOCTYPE html>
<html>
<head> </head>
<body> </body>
</html>
To insert a paragraph in the body, use the tags <p>.
Paragraphs and headingsTo give your paragraphs headings, use heading tags, e.g. <h1>. H1, marks the paragraph as the most important as it is the largest heading, the sizes go as small as H6.
Adding imagesTo add an image to your website, use an <img> tag. This tag is a bit different, instead of putting the content between the tags, you tell the tag where to get the picture using src. It’s also different because this tag self-closes: it doesn’t have a separate tag to close it. Note the / in the tag to close it… <img src=”url”/>.The URL tells the <img> tag where to get the picture from. Every image on the web has its own image URL. Simply right-click on an image and choose “Copy image URL”.
Click that imageIn order to make hyperlinks, use the <a> tag. These are the words or images you click to go on to a new page! Just like <img>, <a> has an attribute that tells the link where to go. Instead of src, <a> uses href, like this… <a href=”URL”></a>.The href, tells the link where to go to, and the text between the <a> tags is the text you click on. To make it a clickable image you need to insert the <img> tags between the <a> tags.
Every house needs a frameA HTML page needs a certain number of essential structures in order to work. The basic frame looks something like this…<!DOCTYPE>
<html>
<head>
<title> </title>
</head>
<body> </body>
Web Design Basics – Codeacademy 3
</html>
HTML Basics || Making ordered and unordered lists Changing font size, colour and type Changing the background colour Aligning the text
Ordered listsBegin an ordered list with the opening tag <ol>, Each individual item in the list then needs to be wrapped with the <li> tag. These lists are numerically ordered.
Unordered listsUnordered lists are good if you do not want to number things, but instead just create bullet points. The only difference is, instead of using <ol> use <ul>.
Making commentsYou can include little notes in your HTML code that the browser won’t display. But it will be in the code to help you or somebody else remember why you did certain things. To make a comment start it with the tag <!-— and end with -->.
Font sizeYou can give tags more instructions by including attributes in the opening tag. An attribute is simply a characteristic or some description for the content in the element. One example is src in img and href in a. To change the size of your text, use the style attribute. <p style=”font-size: 12px”>.
Font colourTo change the colour of text, simply add the style attribute to the opening tag, then make the style equal to “colour:blue”. If you want to change the colour and the size, simply add a semi-colon between each bit, e.g. <h2 style=”colour: green; font-size: 12px:”
Treehouse<h1> First level headline elements label important sections of a page, just like in a newspaper
