Building WebApps using Visual Studio Code (2/11) HTML

July 26, 2019 posted by



hello and welcome back now that we have your computer all set up with Visual Studio code we can jump in and get started with developing your first web page so this lesson is going to take you through creating a very basic web page and introduce you to some of the core concepts of how a web page is built using HTML code so let's go ahead and get started so what we're going to build today is we're going to build a small little web page that tells that you can let people know a little bit about you maybe a school club or a hobby you like for instance I love music so I might build a page about music you might build it about cars or your favorite music group okay so we're going to get started by loading up Visual Studio code so I'm going to double click the icon okay once in Visual Studio code I'm going to go to file I'm going to select open folder in a dialog window that comes up navigate to a good location to store your new project often the best place will be your Documents folder but choose a location where you will remember to find it later once you have a location selected you will want to create a new folder for your webpages click on the new folder button a new folder will appear change the name of the new folder to something you like in this case I'm going to use choose to code and then click the select folder button at the bottom when you return to code you'll see you have your new website folder project here I'm actually going to expand this a little bit so we're going to go full screen so we can see a little bit better so we have our choose to code folder so it always shows right here what your working folder is so we're going to be working inside the choose two code folder today so let's get started let's go ahead and create a new file so the way we do that we're going to mouse over choose the code we're going to move over the very first icon which when you see when you move over it you get an icon for new file we're going to click that button and then we're going to type in index dot HTML okay really you could call the page anything but most web pages start with an index dot HTML as the first page so it's a good idea to name the file this way so let's go ahead and let's start adding some text to this file and if you're following along using the instructions you could just copy and paste so that's exactly what I'm going to do okay so I've pasted in a bunch of text here so all we have so far is you know just a bunch of text in a file so let's save it and let's see what this looks like and again what we're doing here is we're saving the file the way I did it here as I hit ctrl s another option you can do is you hit file and then save and you could always see if there are pending changes waiting to be saved it shows you right here one unsaved and you also have a little one that shows you the file you're working on and this little dot right here that it needs to be saved so I'm going to save it so now if I browse the location where we created the project I can go to my document so it's my documents I can go to choose the code and there's that file I created so let's double click on that file and see what comes up so you'll notice here there's just a bunch of text all thrown together even though in our Visual Studio code you know you see that you have a title you have a couple you have a list here you have a couple paragraphs and it's formatted ok when you open it up in your browser it's just all thrown together so let's go ahead and let's add a bit of formatting so I'm gonna close this first thing we're going to do is we are going to tell the document that what we are working with is an HTML document so we're going to do that by add adding in the following code doc type HTML ok so now the browser knows that this is going to be an HTML document most browsers will assume that it is HTML without this but it's never a bad idea to set the expectation for the browser to view as an HTML file next we'll need to tell the browser where the HTML starts and stops so we use this by using tags opening tags look like this a open bracket HTML close bracket and then we're going to add a closing bracket at the bottom and a closing bracket the only difference is there is a forward slash in front of whatever the tag name is so in this case it's open bracket forward slash HTML and so we're going to put that at the end of the page so in other words what we're doing is we're telling the document that the HTML starts here and it ends here with the beginning and an end closing tag now that we have those tags we're going to add what's called head content in now we don't have head content just yet so what we're going to do is we're just going to add the opening closing tags for head so I just open bracket HEA d close bracket and I'll do a forward slash and close out that one okay so now that we have the the head placeholder there so that we're gonna add header items in there we're going to add what's called in the body tag and the body tag is used to tell the browser where that content for the page starts in stop though so the body of the page so we're going to start the body tag right above our text and then we're going to scroll down and we're going to close off our body tag right below where our text ends so what I'm going to do here is I'm just going to highlight this text and I'm going to indent it using the tab key just so that this all looks good and it lines up nicely and I'm going to save again next we want to set a number the lines to be header lines we do this using tags such as h1 h2 and so on through h6 the most top-level is h1 the browser typically makes the h1 tag the largest and then through H two three four five six incremental e smaller and again it depends on the styles you set for which we'll go through in a later lesson so while we're at it we're going to want to mark the paragraphs with ap tag the P tag basically tells again the browser where the paragraph starts and ends and it formats it accordingly this helps the browser to format these as individual paragraphs rather than creating one big long block of text like we saw earlier so again so we're going to use h1 tags and we're going to use P tags throughout it so let's go through and we're going to mark up all this so that we can add some formatting so I'm going to add an h1 tag around visit any town USA because this is the title of our page I'm going to go down to amazing museums I'm gonna add an h2 around this so opening h2 tag a closing h2 tag because this is a subheading this is not the most important heading and then while we're at it here's that each one of these lines is technically a paragraph so I'm gonna in front of each one of these lines I'm going to do an opening paragraph tag and then I'm going to close the paragraph tag so let's do that so open paragraph let's close that paragraph again so we'll come down here again we'll make this an h2 and we'll call these each one of these lines of paragraph and this is an h2 as well and this is a paragraph again so now if I save the file I'm going to save the file and I'm going to go back to my documents and I'm going to double click on it to open it again and look at that you see it made the visit town any visit any town USA the largest item on the page because it is the heading and it separated each one of these paragraphs out and we have the subheadings above each one of them finally we have two lists that we want to work within the page the things the do list and the how to get here list we want to tell the browser that these each one of these are lists we have two types of lists we have ordered an unordered lists an ordered lists puts a numeric value at the beginning of each list item where unordered lists use as a graphic symbol to mark each list as an item to create an ordered list we use an Oh L tag and for an unordered list we use the UL tag for both lists each individual item is marked with an li tag wrapped around it so let's go ahead and let's do that here so things to do I'm going to give a heading an h2 heading that we did earlier and then I'm going to create my ordered list so I have to tell the browser start the ordered list here and end the ordered list here and now each one of these items is a list item so I'm going to wrap an li tag around each one of these items okay so I'm adding in Li tag around each one and then again I'm going to indent this with the tab key to make my code look good and then we have one more list down here and I'll make this one an unordered list so I'll start my unordered list here I'll end my unordered list here oops and each one of these and what I'll do is I'm just going to copy and paste okay so now that we've added our code for our ordered list and our unordered list let's go back and see what the page looks like so I'm going to go back and double click and look at that you'll see under things to do we have one two three four with our items and if I scroll down for how to get here we have by plane train automobile and boat okay let's go ahead now and add some more information about your page so let's give your page a title remember that head tag we put in early on let's go back and add another tag to tell your browser what to display in a window title this will help us know which title is your web page this time we're going to insert a title tag within the head tag so if I do an Open bracket title and let's call this my first web page and again what a great feature about visual studio if you just open up another bracket it has intellisense so it knows that you want to close it so you can either click on that title or you can hit the tab key and it will automatically do that ending closing title tag for you so that's it you've now turned a full text file into your very first web page so let's go ahead and let's browse again and let's open up the file and if you'll see up here now it says my first web page as the first title so congratulations you've turned a simple text file into your very first HTML web page we are now ready to move on and learn how to add some more style and flair to your web page this will come in the form of colors images and some formatting so let's go ahead and do that

No Comments

Leave a Comment

Your email address will not be published. Required fields are marked *