Coding

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

  • 00:00:01 so back to our basic text we got our
  • 00:00:04 headings we got our paragraph you get a
  • 00:00:07 link what else might be very basic to an
  • 00:00:10 HTML document not sure if you know it
  • 00:00:14 but lists are also quite common if we
  • 00:00:19 have a navigation like this with a
  • 00:00:22 drop-down like this that's basically a
  • 00:00:25 list and that's basically a list right
  • 00:00:27 it might not have bullet points or
  • 00:00:30 anything like this but it is a list of
  • 00:00:31 items and therefore we get this
  • 00:00:36 unordered list tag which is ul for
  • 00:00:40 unordered list and this tag alone won't
  • 00:00:46 create a list a list also needs items
  • 00:00:48 right so this tag is used in the way
  • 00:00:52 that we defined a list and then we
  • 00:00:55 define a list item Li for list item list
  • 00:01:01 items now let me just copy this line to
  • 00:01:08 create a second list item and if we
  • 00:01:12 reload our page we got our list here
  • 00:01:15 with the two list items we just you find
  • 00:01:18 as I said this one does have bullet
  • 00:01:22 points because we're not applying any
  • 00:01:24 styles to it where this page clearly
  • 00:01:27 applies some styling which says okay no
  • 00:01:30 bullet points gray background when we
  • 00:01:32 hover over it it should have a dark grey
  • 00:01:34 background and so on this list also has
  • 00:01:37 links within it as you can see we could
  • 00:01:40 do this too we can say okay let's add a
  • 00:01:44 link here H ref point to Google again as
  • 00:01:50 you can see I can leave out the www so
  • 00:01:55 let's create a link again list item
  • 00:02:00 should be inside this link and if we
  • 00:02:02 reload we got a little side them with a
  • 00:02:05 link in it so we can really encapsulate
  • 00:02:08 our text within each other and this is
  • 00:02:11 quite common in HTM
  • 00:02:13 that you've got several levels of text
  • 00:02:15 so you get an unordered list of list
  • 00:02:16 items in it with links in it for example
  • 00:02:21 so that's the structure of an HTML
  • 00:02:25 document I was talking of so headings
  • 00:02:29 paragraph links lists what else do we
  • 00:02:31 have by the way I just recognized
  • 00:02:35 something which is a bit embarrassing
  • 00:02:36 your whole document HTML document the
  • 00:02:40 head and body section is encapsulated by
  • 00:02:43 an HTML tag which basically tells okay
  • 00:02:47 this is all HTML as you did see the page
  • 00:02:52 worked without these tags – but we're
  • 00:02:55 writing semantically correct HTML
  • 00:02:58 therefore it might not be better I
  • 00:03:00 forgot it because you could really see
  • 00:03:02 the difference it's working the other
  • 00:03:05 way too but we're gonna create a correct
  • 00:03:09 structure here which again has its
  • 00:03:12 reason in a sense of how it is displayed
  • 00:03:16 on different devices or accessed by
  • 00:03:18 things like screen readers okay so back
  • 00:03:22 to our important HTML tags I just saw
  • 00:03:24 that and wanted to inject it really
  • 00:03:25 quick another important thing we
  • 00:03:27 definitely have for many pages are
  • 00:03:29 images here we got our image tag which
  • 00:03:34 is just IMG for an image short form and
  • 00:03:39 there's a special tag because it is self
  • 00:03:43 closing which means we don't have this
  • 00:03:47 structure here with opening tag closing
  • 00:03:51 tag but instead we got image and then in
  • 00:03:54 the same tag we got a slash and the
  • 00:03:58 closing attacked a relative greater than
  • 00:04:00 sign immediately this is because an
  • 00:04:04 image tag doesn't hold any content which
  • 00:04:08 you would write between the opening and
  • 00:04:09 closing tag instead an image is all
  • 00:04:12 defined by the attributes you give it
  • 00:04:15 such as the source of our image now I
  • 00:04:19 looked up some random image on Google so
  • 00:04:23 just inserting is just
  • 00:04:25 blinking here so we get our source now
  • 00:04:27 let's refresh our website and we got
  • 00:04:30 this image here I'm going to do that now
  • 00:04:36 additional attributes we here I have
  • 00:04:38 here are an alt text for when the image
  • 00:04:43 is not loaded corrected there's a text
  • 00:04:47 which will be displayed instead we go
  • 00:04:52 also get a width of which gives us the
  • 00:04:57 possibility to override the default
  • 00:04:59 width of the image so this is just the
  • 00:05:01 sized image normally has and if I give
  • 00:05:03 it a width of 200 an automatic
  • 00:05:05 automatically scales down so it keeps
  • 00:05:07 its height and just changes the width
  • 00:05:11 now if you also define a height of let's
  • 00:05:14 say 400 pixels oops
  • 00:05:19 let's click click today then we got this
  • 00:05:23 skewed image here because these
  • 00:05:27 attributes override the default behavior
  • 00:05:30 of first taking the standard normal size
  • 00:05:34 of the image second adjusting it if we
  • 00:05:38 give if we define one dimension if your
  • 00:05:42 height or width and adjusting the
  • 00:05:43 different the other one and then if we
  • 00:05:46 give both it uses both so just removing
  • 00:05:51 that oh by the way this px is one of the
  • 00:05:55 available units we have and we will come
  • 00:06:00 back to those when we are actually
  • 00:06:02 discussing CSS so that's an image we got
  • 00:06:06 some more attributes we could use but
  • 00:06:07 let's stay basic here now another thing
  • 00:06:12 we definitely have on many pages are
  • 00:06:15 forms where a user has to enter some
  • 00:06:17 data forms all the consists of several
  • 00:06:22 tags so they start with a form tag which
  • 00:06:26 also has a closing tag and between this
  • 00:06:28 form tags we define the elements of our
  • 00:06:32 form so for example we get an input
  • 00:06:37 for an input element where a user can
  • 00:06:40 input data of a type which is an
  • 00:06:47 attribute we have to provide let's say
  • 00:06:49 text it could also be password for
  • 00:06:53 example which is also a input box but it
  • 00:06:56 automatically turns all characters to
  • 00:06:58 stars through our people linking as your
  • 00:07:01 screen can't see your password and this
  • 00:07:04 also is a self closing tag so it's just
  • 00:07:08 with the errors with the image we just
  • 00:07:10 write slash and then greater that and we
  • 00:07:15 also provide a name attribute which is
  • 00:07:18 important when the form is actually sent
  • 00:07:22 to the server that it can identify which
  • 00:07:26 input element got which value by the
  • 00:07:30 user and this is a kind of identified by
  • 00:07:32 the names let's just name this user name
  • 00:07:35 for example I am going to copy it show
  • 00:07:41 you the password one just using password
  • 00:07:43 here that's only for the way it
  • 00:07:46 displayed that's the only way it's
  • 00:07:48 important the type name is password the
  • 00:07:51 names are purely optional that's not
  • 00:07:55 that's important for the browser how to
  • 00:07:58 render it that's optional because that
  • 00:08:00 assumed as a certain name how you can
  • 00:08:03 identify it on the server side on which
  • 00:08:08 we're not covering right now and add a
  • 00:08:11 button gives us also a type of submit
  • 00:08:16 which basically says this partners meant
  • 00:08:18 to submit this form that's important if
  • 00:08:21 we would have several buttons within a
  • 00:08:23 form and our buttons would do other
  • 00:08:25 things and only one button should really
  • 00:08:27 send the foreign to the server then we
  • 00:08:30 would have to define which button is
  • 00:08:31 responsible for this and just give it a
  • 00:08:35 text of submit this is the text which
  • 00:08:37 will appear on the button now reload our
  • 00:08:40 page and here we got all four now we got
  • 00:08:43 our user name field here and our
  • 00:08:46 password field as you can see which
  • 00:08:48 awesome automatically hides
  • 00:08:50 our characters and if we hit submit well
  • 00:08:53 it tries to submit it as you can see it
  • 00:08:57 automatically created a get request
  • 00:08:59 which might not tell you anything right
  • 00:09:01 now we'll come back to that too and try
  • 00:09:05 to send it to the server obviously we
  • 00:09:07 don't have a server here so yeah nothing
  • 00:09:10 really happened here now there are two
  • 00:09:16 more elements I would like to talk about
  • 00:09:19 but these are very basic elements for
  • 00:09:22 styling or for creating visual layouts
  • 00:09:25 for layout in our page and that's why I
  • 00:09:28 will go into detail about them in a
  • 00:09:31 later stage but for now just be aware
  • 00:09:34 that the div and span tags are also very
  • 00:09:41 important for a document when it comes
  • 00:09:43 to laying it out and styling it so
  • 00:09:47 that's it for this video and we'll dive
  • 00:09:49 deeper into our HTML structuring and the
  • 00:09:55 one in the next video have a nice day
  • 00:09:57 bye