June 2, 2014

Learn the Basics of HTML in 12 Minutes

HTML Table Sample with collapse, border-width,...
HTML Table Sample with collapse, border-width, etc tags/parameters/properties, rendered by Trident (/Internet Explorer) engine (/web-browser). (Photo credit: Wikipedia)
English: Browser usage share on Wikimedia Foun...
English: Browser usage share on Wikimedia Foundation projects on June 2011. (Photo credit: Wikipedia)

In this short HTML tutorial, I explain the basic structure of an HTML webpage and introduce some important tags.
This one is a excellent tutorial on HTML coding to create basic websites for your business.
Subtitles:
0:02
I don't think this is totally its maturing introduction
0:04
HTML is a coarse language used on the Internet mainly for the structure and
0:09
content to web sites but Houston
0:11
nearly every website nonetheless I'm gonna be used in north past
0:15
in windows for this at all just to demonstrate how easily you can create an
0:19
HTML document
0:21
on hopefully by the end of this tutorial
0:24
you hav a good and a stunning of the structure HTML
0:27
you not be an expert but you should have
0:31
um good knowledge of essentially how a channel works
0:36
on which you can then build on progress from there
0:39
so got a blank document here in north past HTML
0:44
is made up of talks now targets how a channeled
0:48
fines different areas and sections
0:51
of the document under tile a web browser would read and interpret
0:56
the cold essentially said
1:00
the first hike you need initial is simply the HM I'll talk
1:05
now most types national
1:10
need opening and closing sir see appeal
1:14
got opening a channel tyke simply the word HTML
1:17
in between the symbols
1:24
and then down you've got the closing a channel type which is nearly the same
1:28
courses with a forward slash put in there and nuts
1:31
defined closing talk so everything in this particular HTML file
1:37
will now go in between these talks so I'm gonna
1:41
you stop to indent the tax within it
1:45
am it's good practice makes HML much easier to read
1:48
to within the issue multidex
1:51
we have two sections behalf the head section to have an opening and closing
1:57
head tucked and then the body
2:01
which so indigent opening and closing
2:05
BodyTalk so
2:08
this is simply the the basis and
2:12
the basic structure of an HTML file I'm just gonna should go through
2:18
SEM vital tykes and some really basic ones that
2:22
you need to know to stop building website initial
2:26
so in the head section this is where
2:29
its state like information about the page should go
2:32
in the Body section this is where the actual content which is displayed to the
2:36
user would go
2:37
source on the head section all we really need to pay for now
2:41
is the title talk and this is the text displayed in wet clothes
2:45
title bar sponsored a stick in there hello world
2:50
for example so if we were to save this now
2:55
must remember to save it us
2:58
and shellfire you can just change in North Park the Save as type 2 all files
3:09
and then
3:09
type dot
3:13
HTML simply as the file extension
3:17
if we were to set us
3:21
and then open it in a web browser we would get
3:25
a blank page but it would it should say hello world
3:31
in the title bar okay so we've got
3:36
a blank page but it says hello world appear in the title bar
3:40
so now we want to add some content to the page
3:45
so usually the first thing you would want
3:49
is a title issue now how some Hyundai hitting tux
3:53
we've got h1 which which creates
3:56
the biggest heading heading and terms of style simply
3:59
increase the font size in exit polls so that would be opened
4:04
and closed just the same as to the Tax Review so far
4:09
on then after h1
4:12
you have h2 h3 h4 h5 and h6
4:16
on which get smaller each time 2h6 will be the smallest heading
4:21
you could have 2h won't be the man heading then you'd use H
4:24
to as a subheading for example to adjust
4:28
was gonna use one for now on stick hello world
4:32
in there another keep switching to Internet Explorer
4:36
see can't see the progress we're making
4:39
to now have heading hello world obvious we're
4:42
thats but with just christa so after heading you'd want some
4:47
text potentially on navy polka effort XO dues to p-type
4:52
p calls for paragraph this is also open and closed with the text inside
5:01
so we could do that on for save its
5:06
refresh the page we get a paragraph a texan any
5:09
on because we're using the cracked Alex the heading tag in the paragraph talk
5:14
on that h1 p do
5:17
web browser and it shall automatically
5:21
sets the line spacing indents everything
5:24
us we would expect to see it
5:30
if you want another paragraph it would be simple case if
5:35
outing mill p tax and then
5:42
if I just do that
5:45
your CV is another paragraph for again with with the line spacing
5:49
automatically out in force
5:53
so you're building a niche in a web based web sites
5:56
you may want in image um so
5:59
we're gonna create an image again act I'm doing all this from scratch to seek
6:04
an
6:05
to hopefully help you understand exactly how it works
6:08
I just creating a new image scholars image dot
6:12
BNP
6:19
course assistant empty file at the moment
6:23
2 int just create an image
6:27
it it of course it doesn't really matter what in its
6:31
because it's the HTML who work with it
6:36
to have gun image we're not gonna look at the time we need
6:39
to put the image into the web page
6:43
this uses the ING tag
6:46
but of course and I am gtalk alone wouldn't get as much of an image
6:51
the way this one works Recep properties within the target self
6:54
to set there the path to the the image file
6:58
we use src for this net equals and
7:02
open and close crooks and within the courtroom for the park so
7:06
I can just use a relative path I'm not gonna go
7:10
too much into how relative and absolute paths work
7:13
but essentially relativepath I can simply type image dot
7:17
BNP on since it's in the same folder
7:21
arts this HTML file
7:24
it will work I could have call school for the full thing by typing like see
7:28
kolam backslash documents
7:32
I'll whatever is in your version windows
7:36
acceptor but there's no need since then the same folder
7:41
issue was in kinda image folder will be images slash
7:44
images to PNP it was in a folder one level a PU stocked up slashed ago
7:49
upper level this is when using relative file paths
7:52
which is usually much easier
7:56
so also in the image tyke you can set things I tweak
7:59
you would do it in the same way he could do it in pixels
8:03
I am ended in cents if you don't put those properties in
8:07
then it it just displays
8:10
that the original sizeof damage
8:15
said image tag doesn't actually have a closing talk
8:18
because if you think about it with we define everything about the image
8:22
within the target self so there's if we opened and closed the time do
8:27
there's nothing to go inside to what we do we can just leave it like that so
8:31
weeks its a self-closing talk we just put forward slash
8:35
at the end of the talk before like
8:38
essentially closing the opening tag on done
8:41
makes it open and close all at once
8:47
so if we set out and
8:51
go back to our web page
8:55
for consider lovely image I just created in paint
9:00
such a simple as that on an image to a web page using day I am gtalk
9:04
some guy critical for a couple more tugs at UH
9:08
use on a regular basis if for example
9:12
we have no the sentence in this paragraph
9:16
this my first web page I hope you like it
9:21
just so you can see what that looks like as you'd expect
9:25
is my first web page I hope you like it but what if we wanted to
9:28
second sentence on the next line yes we could use
9:32
another paragraph tag and present a new paragraph
9:35
but that's not just the next line up sick couple lines down
9:40
if you want to do that we use did direct attack
9:44
for just a line break and that's simply
9:48
BR again there's nothing that could go insight
9:52
of it break so this is another self-closing tag
9:57
now you could just do like dot that would work in HTML
10:01
but thats probably a better way to do it
10:07
to for said that and have a look at the results you can see it just goes on to
10:11
the next line
10:12
without leaving any spaces
10:17
the final Tok I'm gonna show you in this tutorial
10:21
probably not one you'd use loads on
10:25
the HR tyke
10:28
now this creates a horizontal line across the page
10:33
so again there's nothing that could coincide a horizontal line so
10:37
itself closes I am it's as simple as that
10:41
it's also the spacing force hopefully
10:46
and we see we get a gray line across so you could use that to separate different
10:50
sections a web page
10:53
so we've created a basic HTML page just to recap got the HML talks which
10:58
everything else goes in and then inside %eh a multi we've got the head
11:03
and the body tax inside the head tie clip but the title tyke
11:07
on which is what this place in the title bar also a web browser
11:11
and inside the body tag we have heading the paragraph
11:15
the horizontal line in this case and other Powerpuff
11:18
aunt and image
11:21
now fantastic webpage but that is the basic
11:25
structure a bitch Emma
11:28
this is the kind of thing you need to know to stop building advance web sites
11:32
so hopefully you now understand how tax work you open and close them
11:36
um various tax self close I'll
11:40
don't need to be closed because they have no and talk
11:44
of course this web page is not on the internet it's just
11:49
on my hard drive on your case on your hard drive
11:53
no one else will be able to see it together online you'd have to find a web
11:56
host and
11:56
upload the free ones at that but again I'm not gonna
11:59
cover any more than basic HML in this tutorial
12:04
it's a good look increasing your first web page and I hope you to content
12:09
regress
12:10
to build eso website
12:13
thanks for watching
Enhanced by Zemanta

About the Author

Iwebslog Labs

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

Post a Comment

 
Iwebslog Blog © 2015 - Designed by Templateism.com