#100DaysOfWeb in Python Transcripts
Chapter: Days 5-8: HTML and HTML5
Lecture: Concept: Core HTML tags
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's review what we built here and talk about some of the important tags that we used. We always start an HTML5 document with DOCTYPE HTML
0:10
Don't say HTML5, but just basic, clean HTML. That's what that means. And then we're going to wrap the entire doc in an HTML tag.
0:19
At the top we put the head the head has a title but it also has things like style sheets, metadata and so on other stuff to configure the page
0:28
or tell consumers of the page like mobile browsers or search engines about the page. And then we get to our body
0:34
which has the main content over here and there close those tags of course as we said the most common and flexible element for layout
0:43
is the div it has no semantic meaning other than it sort of acts like a paragraph. It has what's called block layout.
0:50
Block layout is important because it means basically that element goes on a new line and things that come after also go on a new lines
0:57
shift doesn't flow around it inside there we put some images. Now images have inline layout. So that means they'll flow next to each other.
1:08
And we didn't have to do anything to get them to span across the top. That was great. We wanted to have some input.
1:14
So we have a form. And we have input elements like input type equals text, and other types. We'll talk more about that shortly.
1:22
And if you want to submit that we're going to have a button. And we going to submit that button you can even say type equals submit on the button
1:28
to make it super obvious. Now these both have either inline or inline-block layout. They seem like the kind of the same thing at first
1:36
but inline, those elements do not respect margin, padding, stuff like that. Whereas inline-block, do you could put a padding on a button
1:45
you could put margins on the button. So you may choose one or the other for that. Now, these are just the default values
1:51
so we going to choose them in there we are kind of acknowledging how they work. When we get to the design
1:55
then we going to talk about how we control that how we use that to our advantage. Of course we have our form that we put these elements into
2:03
and we going to submit them back. Often the action is just empty which means submitted back to the same page. Typically post is what we want here.
2:11
Then we want to an ordered list. It's layout style is block, by the list items. These are the elements of the list.
2:19
And then we can put things in them here we put a bunch of hyperlinks. Speaking of which, those a tags are hyperlinks
2:25
and their layout, of course, is inline as well. So those are most of the elements that were used to rebuild Yahoo. I mean, a lot of stuff on this page
2:33
but it's not that much considering what we built. Right Well those are the basic HTML tags and some of the key concepts around them.