Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Transcript of Learn HTML
To Build a house you need bricks, wood, tiles, wall paper, etc...
Similarly, to build a website you need a few things.
So, we know what we need. Now let's get started.
Your first bit of code, exciting eh!
Writing It Out
Now that you have some code and, I'm hoping, you understand a little bit of HTML, I'm going to show you how you can use it to make a website.
You'll need a computer, fairly obvious
An editor - you can download a special editor if you want or you can use the program Note Pad which is already installed on most computers
And a browser to look at your websites on
This can be as simple as a personal blog, or as complex as a life changing business. Either way it's best to know what kind of website you're building before you start.
It's no use sitting down to make your website, only to realize that you haven't the faintest idea of where to start. But don't fret if you're there thinking "I don't know a single bit of code, sure I don't even know what html means!" Because it's all to come. And let me just relieve you of this one worry - html stands for Hyper Text Markup Language. So there now. I bet you feel more knowledgeable already!
Heads, Shoulders, Knees and Toes
To start your coding you'll need to note the doctype or the browser will get confused.
What's What and Where's Where
Tags are the verbs of HTML. They come in angle brackets < > and
almost every tag has a closing tag
marked with a forward slash. There
are hundreds of tags, each with
it's own purpose.
is a tag that makes a paragraph
will close or end that paragraph
is a tag used to write large text
will stop the text being large
Elements are like the nouns in coding. They are what goes between the tags, what the tag is effecting
this element is part of the paragraph
</p> but this text isn't
this element is bold
</b>but this text isn't
Once you have your 'sentence' you want to make it more interesting. For that we use attributes, the adjectives. Attributes go inside the tags and each one has a name and a value. Like tags, there are many attributes but we wont use attributes until we've gt the rest covered.
> This small text will be blue </h6>
> This paragraph will be centered in the web page </p>
This is the name
This is the value
If you are not american than
you will have to watch your spelling on words like
centre => center
colour => color
because otherwise your code will not be understood by the browser and wont be used
Make sure not to leave out
in closing tags or they will not have an end and
the tag will apply to all of the
rest of your code
Apart from that, all of the code must be between html tags.
First comes the head with the information not displayed on the actual page, like the title.
Then there's the body with everything that is going to be displayed on the page, like text, images, tables and lists.
And around all of the different sections there are div tags which allow us to style a large area at a time.
Bits and Pieces
Now that you know what goes where, you ought to know what each tag does.
I've already explained the head and body tags, but what about those other ones?...
What's the point in learning the language if you don't know your grammar?
The basic set up always comes in handy
You might wonder what this little tag is for because it goes in the head part and therefore surely it can't be seen, right?
Well, while it can't be seen on the actual page it is seen on the
and when you
he page the title will come up rather than the header you have at the top of your page.
h1 changes the size of the text to be very large and h6 changes the size of the text to be very small.
h2 will change text to be big, but not as big as h1, and h5 will change text to be small, but not as small as h6
and so on with all of the others .
putting p tags around a set of words will make it all into a paragraph. Simple as that!
ol stands for ordered list, which is a numbered list:
ul stands for unordered list, which is a bullet-pointed list:
To make any form of list you need to use the li tag
li tags go inside lists as they are list items. If you wanted to make an unordered list of colours of the rainbow it would look like this:
div tags can be put around any passage or set of passages to block them together.
If you were to put div tags around a paragraph in your editor and then look at it in a browser it would appear to make no difference to the page. That's because we haven't added any attributes but we wont get to that for a while.
The br tag is one of those ones that doesn't have a pair. It's a lone wolf. If you put this tag between two paragraphs it will add a gap or break between them
Now It's your turn to try it!
If you want to see the page in a browser like I did just there, then you will have to follow a few simple steps
Type out your code in Notepad
When you're done click 'file' then 'save as'
Name the code 'name.html' or something along those lines just remember to end with .html
Open your libraries, click the file and it should come right up
If it asks you to choose a browser first, then do
I Hope that was of some help to you on your HTML journey, but that was not all. Oh no, that was just the basics, to start you off.
Didn't you notice the lac of colour? pictures? structure?
We didn't even get properly into attributes!
What kind of human being am I???
Well don't fret, all's to come in the next little presentation.
Now be off my little coders!
There You Go, It's Over Now
<b> </b>, <i> </i>
Putting b tags around a piece of text, even if it's already an element of something else will make the text come up
eg. <p>some plain old text
more ordinary text</p>
Likewise, putting i tags around such a piece of text will make it come up
eg. <h1>normal header
Some quick links:
Great sights for learning more
A list of tags