Spread the love

Welcome again tot his new course of HTML 5, so i’m going to teach you the basics of html5 in this first session I’ll be covering some of the basics that you need to get started, So HTML is a markup language used to make webpages and html5 is version 5 of that language the older HTML version 4.0 1 and XHTML version 1.0 has been used for many years but html5 seeks to be an improvement over these older versions for example in order to support multimedia html5 has new elements for audio and video and I’ll be showing you how to use these new elements and features in the next session of this courses.

So what do you need for writing any HTML 5 code?  you need a browser to test your HTML code and I’ll be using Google Chrome and you need a text editor I’ll be using notepad plus plus, other people want to use ATOM or another editor, I found my copy at notepad – + – + org I’ll start by defining a few terms that you will be hearing me use frequently the terms are tag element and attribute let’s start by looking at a tag this is

surrounded by angle brackets next let’s look at an element an element has a start tag and end tag and content in-between sometimes you may hear start and end tags called opening and closing tags notice that the

tag except that the end tag begins with a forward slash before the name so this whole thing including the start tag the content and the end tag is called an element in this case it’s a title element most of the elements in HTML 5

content in between however there are some elements that only have a start tag here’s an example this is a br element which represents a line break it doesn’t have an end tag

the last term that I want to define is the attribute an attribute allows us to add additional information to an element for example here is an h1 heading element and attribute if present is located in the start tag after the tag name this is the attribute the first part of the attribute is the attribute name the attribute name is followed by an equal sign then the equal sign is followed by the value of the attribute enclosed in quotation marks html5 actually allows some other variations for specifying attributes but this is the variation that I typically use now that we’ve covered the definitions let’s look at a sample html5 document you’ll notice that I’ve indented some of the lines I did this by just adding spaces at the beginning of some of the lines this is not required and I only do it to make the HTML code easier to read it doesn’t change how the web page will be displayed in the browser what I’ve done

the elements to span more than one line

start by saving the file so from the file menu select save as then give your file a name and use HTML as the extension I’ll just call this first dot HTML now to view your document in a browser locate it using Windows Explorer or something equivalent and then double click on it to open it up in your default browser or if you’re using notepad plus plus you can go to the run menu and select a browser from the list for this to work however you will need to already have the browser installed this is what our basic html5 document looks like in a browser now let’s go

html5 document starts with a doctype and this is what a doctype looks like when using html5 the doctype is a preamble for our html5 document after the doctype is the HTML element this is the start tag for the HTML element this is the end tag and this is the content the HTML element is the root element of the HTML document and the rest of the HTML code is located between the start and end HTML tags you might notice that the start HTML tag contains a language attribute I have the value set to en which means English it’s encouraged to use this attribute because it can be helpful for multiple reasons

synthesis tools with pronunciations inside the HTML element there are two sections the head section and the body section the head element defines the head section which contains information about the HTML document the meta element can be used to specify various kinds of information this element only has a

specify its information in this case we’re specifying the character encoding utf-8 is a very common value to use here the title element is used to specify the title for the document the content in between the start and end tags is what is displayed on the browser tab so our title is example document over here on

says example document now let’s look at the body section of the html5 code the body element defines the body section which contains the main content of the HTML document this is where we put the information that will be displayed in the browser in this example we have a single P element in our body section P elements are used to represent a paragraph this text in between the start and end tags is displayed in the browser


Please enter your comment!
Please enter your name here