Learn HTML

Upgrade to remove ads
Upgrade to remove ads
Unformatted text preview:

Learn HTML Full Tutorial for Beginners This video is made up of 10 tutorials for learning Html that build upon each other much like the chapters of a book throughout the lessons in this video university instructor Dave Gray gets straight to the point and he will take you from knowing nothing to understanding advanced Html concepts I ve compiled all of these links into one github resource that you will find in the description we need to get a code editor and the industry standard right now and what I prefer to use is visual studio code again You can use other code editors to write your Html code if you go to code visualstudio com you ll be able to download for windows if you re on windows like I am or you can click other platforms the opening tag or the ending also called the closing tag so we refer to Html tags But every page starts and ends with the Html opening and closing tags and everything else on the page goes between those tags after creating our Html element the head area contai ns data that is considered to be metadata about the page and that is the head area the body area is the part of the page that everybody sees in the browser and that s held within the body element In visual studio code is type P and press tab and it creates both for us so we re going to put some text inside of our paragraph and save once again I m pressing Ctrl s on the keyboard to save you can go to the file menu and from there You can also choose save but you ll notice the shortcut is control and th e letter s live server is a must for you to install is called live server live server is a way to view web pages as we create them which creates your own local server It s what s called a dev environment and that is a dev environments live server automatically reloads our page for us in the browser So let s go back to visual studio code and I m just going to paste in some quick styling that is actually CSs once again Using live server in visual studio code is preferred What you do n t want to do in Chrome is try to open a file like you would in word or some other document browser or even document browser How we open files that s not how you want to view a web page we would need to open with live server to have a live web page that responds to changes we make In this tutorial we were looking for the definition of Html At the beginning of this tutorial so i will link to MDn the Mozilla developer network In the description I m just putting e in for English you might have another language you prefer to put there and you can find a list of those at the MDn network as well anything we change inside of the head element will not be seen on the web page anyway So I ll click the expand button and we ll just see our code now I ve dragged the visual studio code window to a smaller size on the left and chrome to a little smaller size here we ll add a couple of typical meta tags that have metadata that you would commonly see the head is a very important part of the page Even though we do n t see the content of the head inside the body we won t add any more here today But this is the same area where we would link to CSs files and even Javascript files and other resources that we pull in from the web We are pulling in our CSs code using our link tag inside of the head element Now Finally I m going to create an error on purpose by deleting the greater than symbol at the end of this link tag and saving the file with Ctrl s remember to always validate your page and we always do that at validator W3 org web pages are a lot like essays or even a newspaper where they have headings and usually paragraphs of text or at least a sentence or two of text describing something afterwards headings have a hierarchy and that means we ll start out with only one H1 on the page and each page should only have one after that We can have subtopics So for H2 I m going to type something different Let s go with I m ready to learn Html and now we can have a paragraph about that and so we do at least w e have a sentence This is my first web page now I m going to highlight this subheading H2 and the paragraph I m going to add an element that does N t really provide any semantic meaning but visually it helps us on the page and that is a horizontal ru le element we can quickly visually tell the headers apart right now and when a screen reader or other assistive technology looks at our code then it can navigate the code through the headers of what is important

View Full Document
Download Learn HTML
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...

Join to view Learn HTML and access 3M+ class-specific study document.

We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Learn HTML 2 2 and access 3M+ class-specific study document.


By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?