Coding

Real Beginners Corner: HTML, CSS & JavaScript Basics – #3 Basic HTML Tags (1/2)

  • 00:00:00 why I can back everyone now we left off
  • 00:00:03 with this very basic HTML page here
  • 00:00:06 which just has a heading in some text
  • 00:00:09 and in this video now I want to guide
  • 00:00:12 you through the most basic HTML tags
  • 00:00:17 remember this is a tag an opening tag
  • 00:00:20 and a closing tag they always come in
  • 00:00:22 pairs I will guide you for the most
  • 00:00:25 basic tags you need to create a website
  • 00:00:29 from the HTML site remember we also get
  • 00:00:33 CSS and optionally some JavaScript but
  • 00:00:38 we're lonely looking at the HTML outside
  • 00:00:41 and therefore you need to know some very
  • 00:00:43 basic HTML tags you will encounter in
  • 00:00:45 basically every web page you'll gonna
  • 00:00:49 create so I think the best method to get
  • 00:00:56 these tags into your happened – to
  • 00:00:59 structure this is to think about what
  • 00:01:03 kind of things which things do you
  • 00:01:06 encounter on the websites you're looking
  • 00:01:09 at every day so we get some here you're
  • 00:01:15 seeing headings may be of different
  • 00:01:18 sizes so not only h1 tag which is the
  • 00:01:21 biggest heading available but you might
  • 00:01:24 have an H let's say an H free tag so
  • 00:01:28 this is a smaller heading than the h1
  • 00:01:31 tag which might be a subtitle and then
  • 00:01:36 an h6 tag which might be a very small
  • 00:01:43 subtitle just you throw it into the room
  • 00:01:47 so we get some headings the text h1 h2
  • 00:01:50 h3 h4 h5 and h6 we also got text on our
  • 00:01:58 websites we certainly do so yeah we
  • 00:02:01 might use some paragraphs which just
  • 00:02:03 enclose tags plain text longer text
  • 00:02:08 we definitely got some links and now
  • 00:02:11 here we'll have a first example where we
  • 00:02:15 will mix the tags where we will have a
  • 00:02:19 structure consisting of several tags
  • 00:02:22 let's look at this text that's this
  • 00:02:24 paragraph here
  • 00:02:25 let's say we also got an L link save it
  • 00:02:31 and reload our page so we get our h1
  • 00:02:34 heading our h2 heading h3 and here a
  • 00:02:38 link now obviously this isn't a link yet
  • 00:02:41 because all we did is write a link which
  • 00:02:44 is plain text now to make it a link we
  • 00:02:47 need another HTML tag specifically we
  • 00:02:51 need the a tag so oops slash eight this
  • 00:03:02 creates a link opening and closing tag
  • 00:03:05 if we now take a link cut it and insert
  • 00:03:10 it between we almost got a link but we
  • 00:03:14 need one more thing to make it a link
  • 00:03:16 because if you look at it now what
  • 00:03:19 what's missing to make it a link
  • 00:03:21 obviously dine at the destination we
  • 00:03:24 don't specify anywhere where this link
  • 00:03:26 should lead to therefore we need to
  • 00:03:29 define an attribute now attributes are
  • 00:03:33 something we haven't discussed yet
  • 00:03:36 attributes are additions to our HTML
  • 00:03:40 tags to give them additional
  • 00:03:44 configuration and it depends on the HTML
  • 00:03:48 tag which if any attributes are
  • 00:03:52 available for example the a tag has this
  • 00:03:56 wrath attribute for referral which
  • 00:04:02 allows us to tell where should this link
  • 00:04:06 go to now to be able to create an actual
  • 00:04:09 link I'll just use an Internet address
  • 00:04:12 you could also insert or use a local
  • 00:04:16 file so let's say we would have file
  • 00:04:20 indexed
  • 00:04:21 dot html' and we could just enter index
  • 00:04:24 do two dot html' here and if we would
  • 00:04:27 click you click this little link would
  • 00:04:30 be taken to this document but we don't
  • 00:04:33 have it so let's just use a web page and
  • 00:04:37 I'm just gonna use google.com
  • 00:04:40 save it and now reload this page and now
  • 00:04:44 you can see we got a link which is
  • 00:04:46 automatically styled such that is blue
  • 00:04:50 and has an underline now keep in mind
  • 00:04:54 styling can and will be changed by CSS
  • 00:04:58 cascading style sheets and that's why on
  • 00:05:03 most pages you don't see something like
  • 00:05:05 this but a certain corporate identity or
  • 00:05:09 a just a certain way it looks and we
  • 00:05:12 will get into this but for now this is
  • 00:05:14 our basic style I can only repeat itself
  • 00:05:17 so we get this link and if we click it
  • 00:05:19 while we're taken to Google awesome so
  • 00:05:24 we get having's paragraph and a link and
  • 00:05:27 if for this link we had to use an
  • 00:05:30 attribute which is called H Rev and
  • 00:05:34 attributes in HTML are either of this
  • 00:05:40 kind like we have some attribute equals
  • 00:05:43 something between quotation marks or
  • 00:05:46 standalone just attribute without
  • 00:05:49 anything behind it these are the two
  • 00:05:52 possible ways attributes look like and
  • 00:05:55 if you want to know which attributes are
  • 00:05:57 available then really this is your
  • 00:06:00 reference here so if you were to click
  • 00:06:02 on the ADA tag here well we can see the
  • 00:06:06 ref attribute here and it is set here to
  • 00:06:10 the most important attribute of the a
  • 00:06:12 element is the ref attribute but all
  • 00:06:17 attributes can be found here as you can
  • 00:06:19 see there are a lot more than Chester
  • 00:06:23 href attribute but to be honest most of
  • 00:06:27 them you don't need and I will focus on
  • 00:06:32 the most important attributes for now as
  • 00:06:35 only focusing on the most important text
  • 00:06:37 – and I don't want us to get too
  • 00:06:39 complicated and as you can see for
  • 00:06:41 example here quite a lot of these
  • 00:06:43 attributes say not supported in html5
  • 00:06:46 by the way when we're looking at this
  • 00:06:48 this is important thing when you see
  • 00:06:51 something where it says not supported in
  • 00:06:53 html5 that does not mean that if you
  • 00:06:57 were to use something like this it won't
  • 00:07:01 show up in your browser or it would show
  • 00:07:03 up wrong in your browser because the web
  • 00:07:08 consists of a broad variety of websites
  • 00:07:10 and not all of them are written in
  • 00:07:14 perfect HTML
  • 00:07:16 some of them might leave out this
  • 00:07:19 declaration of the document type some of
  • 00:07:22 them might be using all the versions of
  • 00:07:24 HTML some might be declaring that it is
  • 00:07:27 html5 but they're using semantically
  • 00:07:31 incorrect syntax but the browser is able
  • 00:07:34 to cope for all of that because browsers
  • 00:07:37 are written in a way that they are very
  • 00:07:40 error forgiving they can render a broad
  • 00:07:44 variety of older or semantically
  • 00:07:49 incorrect tags as long as they are
  • 00:07:52 actual tags so if something has been an
  • 00:07:55 HTML tag in the past chances are quite
  • 00:07:58 good you could use it today as well even
  • 00:08:00 though it is not supported by html5
  • 00:08:02 which basically just means you should
  • 00:08:04 not use it but it does not mean you
  • 00:08:07 can't use it at all
  • 00:08:09 but you have to live with the
  • 00:08:11 possibility that browsers will drop
  • 00:08:13 support and someday it will break your
  • 00:08:16 your your layout or your website so you
  • 00:08:22 might ask okay well what happens if I
  • 00:08:24 use some made-up attack like if I say my
  • 00:08:29 own tag right I could write something
  • 00:08:33 like this and as you saw my ad idea even
  • 00:08:35 autocomplete did it for me so save it
  • 00:08:38 and reload this page what happens
  • 00:08:42 nothing as you can see it doesn't appear
  • 00:08:45 it's not written as out as tag
  • 00:08:48 and it's not changing anything because
  • 00:08:52 the browser sees that this looks like an
  • 00:08:55 HTML tag but it doesn't know what to do
  • 00:08:57 it with it and that means it just leaves
  • 00:09:00 it out if I have some text between it
  • 00:09:04 text in my own tag this text will still
  • 00:09:08 get rendered the text as you can see
  • 00:09:11 here will not be left out but instead
  • 00:09:15 only the tech doesn't have any effect
  • 00:09:17 that is mostly to the reason that the
  • 00:09:20 web is currently developing in in kind
  • 00:09:23 of the direction that you might be able
  • 00:09:28 reroute some extent are able to define
  • 00:09:31 your own tags and tell the browser how
  • 00:09:34 it should render these tags but that is
  • 00:09:37 far too advanced for for for the moment
  • 00:09:39 and as of now the only thing you have to
  • 00:09:41 remember is if you write anything which
  • 00:09:43 does nexus between dt technical it is
  • 00:09:46 smaller and bigger than sign the browser
  • 00:09:49 doesn't do anything with it it doesn't
  • 00:09:51 print it out a test text but it doesn't
  • 00:09:53 break anything