Learn More HTML in 12 Minutes

welcome to my second HTML tutorial hopefully you've watched my first learn HTML in 12 minutes these the HTML types that you learned so far laid out in an order that you might find them on a web page in this video I want to spend a few minutes making sure you understand what hTML is and how it differs from other languages that you may have heard of and will be learning if you're trying to make a website hTML is no programming language it's a markup language it defines the structure of a web page it tells the browser which parts of the web page is a heading and which parts are hyperlinks for example CSS is the language used to add style to a web page you use CSS to define colors and fonts etc HTML and CSS are the only two languages you need to make a simple website for more advanced projects javascript is a programming language that can be used to add dynamic features to a website it has nothing to do with Java Java is not a language you need for a normal website javascript can be used for millions of things but to give you one example it can make elements on a webpage move around javascript is a client-side language meaning that it is executed on the user's computer when the load the website PHP is a popular server-side language but I recommend you stick to learning HTML before you worry about any of this other stuff for now I'm going to stick to using notepad to create HTML files but I'll suggest some better text editors in the description so here is a basic structure of a web page let me just get rid of all of that the next type to learn is the a tag this is used to create hyperlinks so you open the tag and like the image tag it needs an attribute you need the href attribute so href equals and then in quotes the URL which you want the hyperlink to go to so I'm going to have this send people to Google com remember the HTTP bit then in between the opening and closing tags is the text that you'll see on the web site so I'm going to type click here and having to look at this in a browser it says click here and it takes us to Google next lists to create a bullet-pointed list in HTML we use the UL tag ul stand for unordered list so we wrap the whole list in ul tags and then each element is wrapped in an li tag so we can very simply add as many as we want all wrapped in Li tags I'll just do two and you'll see we get a nice bullet-pointed list you may be wondering what an ordered list is if this is an unordered one if we swap the UL tags for Oh L tags you'll see that it swaps the bullet points for numbers now I want to return to the image tag from the last video so here's the webpage that we're working on our next to it here I have a folder called images and inside a folder called piano jpg so numbers image like we did last time so relative to this webpage the path of the photo is images slash piano jpg if we take a look at this in the browser we'll see well this is far too big so we need to set the size the image this is done with another attribute called width nice and simple with equals and then in quotes a number which is interpreted as the number of pixels so I'm going to say I want this image 200 pixels wide you'll eventually get the hang of roughly how big things are in pixels for now just guess and use trial and error so you see we now have a small image the height has been adjusted appropriately we could have coarse set the height ourselves height equals and then in quotes say 500 and stretch the image however we want a final attribute for the image tag is the alt tag this is actually a required attribute and specifies the alternate text for the image so I'm going to give myself some more space at the end so we write alt and then equals and in quotes a short description of the photo now you won't see this on the webpage this is what people with text only browsers or screen readers would see instead of the image so the alt attribute for images is a required attribute that means that if you don't include it you you technically have invalid HTML although will look just fine in a web browser you wouldn't be following its standards I'm afraid this is one more thing that is required that I haven't told you yet and that's the doctype there are many versions of HTML the latest being html5 they'll have subtle differences usually a new version of HTML comes with a bunch of new tags and a bunch of old tags removed from the specification the doctype tells the browser which version of HTML to expect the doctype must be the very first thing on any web page locally the doctype for html5 is very simple we started like any other tag but then we had an exclamation mark to tell the browser that this is not actually an HTML tag then we write the word doctype do C typ e in capital letters followed by a space and then in lowercase letters HTML then the closing tag symbol this must be the first thing on every web page next div tags div these are used to group elements on a page intersections think of them as invisible boxes that other things can go inside by default you'll not see them but a div tag will always cause a line break before and after itself so nothing can appear next to a div tag only above and below this can be changed using CSS but we're not at that point yet we can use a div tag to define the header section of a page for example so in our header we could have a the biggest heading welcome to my website close that div tag then we can have one for the main content section here we can have a smaller heading let's also have some text in there remembering the P tag can be used for paragraphs of text and finally for example we could have a photo section obviously it's up to you which sections you define and how you use div tags and you can have div tags in div tags you can nest that as much as you want but for now just a really simple structure another quick tip if you want the copyright symbol type ampersand word copy and the semicolon if you google HTML entities you'll find more useful codes like that okay so we have three sections here and if we take a look at this you won't see the div tags like I said but they're grouping elements together and defining our sections if we were going to use CSS to style any of these elements let's say we wanted the header to have a blue background we need a way to identify the div tag representing our header we need to give it a name this leads us to two attributes that can be added to any HTML tag including void tags the self closing ones a gimmick so firstly we can give a tag and ID don't say ID equals and then we could call it header now an ID must be unique you can't give two elements on a page the same ID if you need to target a group of elements you can give them all the same class and this is the second attribute that can be used to identify on it so I'm going to say class equals and then in quotes the name of a class - between words is up to you we can give any element the same class and we could this one too or maybe we could call this my other class we could then in CSS out of style for everything with the class myclass one last tag for this video is the span tag this is similar to the div tag it's used to create logical groupings on a page but a span tag won't cause a line break before or after itself like a div tag does so let's say we add a sentence welcome to my cool website and we wanted the word cool let's say to be added or read we could wrap this in a span tag and maybe give it a class read so again looking at this in a web browser you won't see the span tag obviously we have no CSS so it's not actually read but it's that - let allow us to target that word if we'd used a div tag instead it would cause line breaks and give us give us that which is not what we wanted so you now know plenty of HTML tags to start creating your website you've got the h1 to h6 tag for headings P tag for paragraphs IMG tag for images remembering the SRC attribute along with width attribute and height attribute and the alt attribute which you need as well it's worth mentioning that you can put these attributes in any order you want inside of the opening inside of the image tag and this applies to attributes of any element the our tag to include a line break and go down to the next line HR tag to separate sections with a horizontal line UL tag for lists with each element dropped in an li tag and in the oil tag for an ordered list with numbers the div tag for grouping elements intersections with the line breaks on the span tag for doing the same thing without the line breaks so you can't overlap elements if I have and opening and closing div tag here whatever tire guy open inside of this div tag I must also close inside of the div tag I cannot open ap tag there and then close it here because this means the elements are overlapping you can't do that the P tag must be closed up here of course elements can go inside of other elements like we've been doing with everything so far if I wanted to create a clickable image if I wanted to turn an image into a hyperlink I could use the a tag with a href attribute and my URL and then simply inside put an image tag etc and then close the air tag afterwards and obviously I need to finish this image tag so I have the alt attribute and that is enough but that would create a hyperlink which is an image I think that's enough for this video I hope you've understood everything so far and I hope you have fun experimenting with HTML I think you now know enough HTML to build a decent website what you're missing is CSS so you're free to learn some CSS before continuing with HTML tutorials obviously there's a lot more to learn but practice with what you've got so far and have fun thanks for watching

Channel: Jake Wright

Views: 848,091

Rating: 4.9402728 out of 5

Keywords: computer, web, internet, html, hyper, text, markup, language, webpage, site, online, jake, wright, windows, notepad, build, learn, tutorial, scratch, custom

Id: KJ13lX20FqU

Length: 12min 0sec (720 seconds)

Published: Tue Sep 10 2013