Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start 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

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Learn HTML

A simple introduction to html for those who don't know how it works and want to learn. Or, if you all ready know html and want to jog your memory on the basics.
by

Emily Gaughan

on 25 September 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Learn HTML

Learn HTML
Building Blocks
To Build a house you need bricks, wood, tiles, wall paper, etc...
Similarly, to build a website you need a few things.
Getting Started
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.
Basic Materials
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
An Idea
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.
Simple Code
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
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.
For example:
<p>
is a tag that makes a paragraph
</p>
will close or end that paragraph
or
<h1>
is a tag used to write large text
</h1>
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
For example:
<P>
this element is part of the paragraph
</p> but this text isn't
or
<b>
this element is bold
</b>but this text isn't
Elements
Attributes
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.
For example:
<h6
style="color:blue;"
> This small text will be blue </h6>
or
<p
align="center"
> This paragraph will be centered in the web page </p>
This is the name
This is the value
NOTE:
If you are not american than
you will have to watch your spelling on words like
centre => center
and
colour => color
because otherwise your code will not be understood by the browser and wont be used
NOTE:
Make sure not to leave out
forward slashes
/
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
<title> </title>

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
tab bar
and when you
search
he page the title will come up rather than the header you have at the top of your page.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> </h1>,</h2>,</h3>,</h4>,</h5>,</h6>
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 .

For example:
<h1>
Biggest
</h1>
=>
or
<h6>
Smallest
</h6>
=>
Biggest
Smallest
<p> </p>
putting p tags around a set of words will make it all into a paragraph. Simple as that!
<ol></ol>, <ul></ul>
ol stands for ordered list, which is a numbered list:
1 ...
2 ...
3 ....

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> </li>
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:
<ul>
<li>Red</li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
<li>Indigo</li>
<li>Violet</li>
</ul>
=>
Red
Orange
Yellow
Green
Blue
Indigo
Violet
<div> </div>
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.
<br>
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
Voila!
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
bold
.
eg. <p>some plain old text
<b>bold text</b>
more ordinary text</p>
Likewise, putting i tags around such a piece of text will make it come up
italic.
eg. <h1>normal header
<i>italic header</i>
normal again</h1>
Some quick links:
http://www.w3schools.com/
http://learn.shayhowe.com/html-css/
http://html.net/
http://www.w3schools.com/tags/
http://notepad-plus-plus.org/
http://komodoide.com/komodo-edit/
http://www.sublimetext.com/
Great sights for learning more
A list of tags
Some editors
Full transcript