Web Design from Scratch: Lesson 2

the next step once you have downloaded the tools that we need in this case only a code editor the next step is to begin developing your first obligatory hello world-wide page and we’re going to get started on that right now so I’m going to be using one of the code writers I mentioned and this one is called espresso that said feel free to use any tool you need they’re mainly the same with minor gaps I’m going to go to file new record and I’m gonna save that is something that my desktop and I’m gonna call it indicator flecked HTML index is this naming convention that is generally refers to your seed sheet and an internet site so for example let’s say you’re building your first static and don’t worry about that command we’ll shield that later but a static web site you will have maybe an about page that could be about that HTML you could be have a portfolio page portfolio dot HTML and then your spring page entail when they go to your website’s URL the default page that testifies will probably be called index scatter HTML so we’ll save that like so and now you can see that it creates this page right here and whether you’re on Windows or Mac you’ll have some identification that it’s an HTML file so if we were to bring this into a browser like Chrome you’re not going to see anything yet and of course it’s a space document now while we’re on the topic of browsers you want to make sure that you have modern browsers installed on your computer so for a Mac user you’re gonna crave safari current copy is five at the time of this recording chrome current version is 11 at the time of this recording and Firefox which is at version four now if you’re on Windows you’ll too want to install IE 9 now what you’ll learn is and I don’t want to scare you just yet but what you will learn is you too have to compensate for older browsers and all browsers have varying levels of consistency in what boasts they patronize so I demand you to keep that in the back of your sentiment but for now don’t worry about it just yet we’ll get that into that in later readings so let’s begin developing our first hello world sheet when “youre thinking about” this sheet you want to think of the markup for my website so as an example let’s go and open up next and I’m gonna vistum the resources and I can do that by right-clicking or on the Mac if you don’t have a right button control click and coming down to view page source now what you’re gonna see here is a lot of really really scary source code but don’t worry it’s not quite as shocking as you might think you watch all of this though this is the mark-up that tells your page and tells the browser how to display your page for example let’s say we have a list of items and you would know that as missile stages if you’ve ever worked with Microsoft Word or Gmail well when you’re writing HTML markup there’s no way to write bullet point you have to specify it and the direction you be clarified that in HTML is by using these tags right here you see this one now li that refers to list item or you’ll be more familiar with it as a missile now that we know that markup is mostly constituents it’s calls developed in partnership to figure a web page let’s try this on our own I’m going to type hello world now let’s load the sheet so you have a couple alternatives some system editors give a preview option where it’ll depict you how the browser one browsers instrument be borne in mind will display the sheet alternatively you can grab the file and lag it in to your favorite editor another option is to go into your browser register open record and browsing to the file so right here we now hear hello world now that said this is a bad practise this is not what you will be doing “youre supposed to” format your markup much better so that the browser knows exactly what page it is and how it should display but that said I just wanted to teach you a little bit about HTML factors so when you’re working with maybe your email and you just wanted to compile some textbook bold usually you foreground it and you press a button that says daring chasten well you can’t do that with HTML markup instead you need to wrap the textbook within elements or tags that specifies how these components should be displayed so within HTML if we want to constitute something bold in general you would wrap it within a tag called strong now take a note of this notice that I did not simply write strong in the text I have to wrap this textbook within strong calls and the above reasons for this is because if I did not have a closing strong label the browser would not know when to end the bar so if you’re used to highlighting and pressing daring this is the same thing except we wrap the text that should be bold within an element and notice this is how we’ve created our strong label so we begin by typing the less than sign the call reputation and we close it and then we do the exact same thing at the end of the text but the only difference is we need to specify that we’re closing the tag and we close the tag by use that forward trounce right there so I’m gonna zoom out save this and let’s try it one more time and construe what happens sure enough text is now bold but let’s say instead we want it to be italic you might do that one as well in HTML we can be attributed to that as emphasis and what you’ll learn and I don’t want to get into it too much just yet but what you will learn is that your HTML calls or parts you should never describe how the text shall be indicated so for example we would never learn adventurous or we would never attend a tag that says font immensity 20 so why is that and we’re not gonna get into it just yet but the reason is on a high level or a higher level it’s because you will learn that presentation how the page should look is dependent upon a separate file that we call a style sheet we should be able to control the entire presentation of our page the entire action it inspects from that document so what if we decides that last-minute maybe a month from now we want the text immensity to be 50 pixels or 50 target you might be more familiar with well in that case you would have to come back to your HTML file and change this to font size 50 and that is a big no-no you should never intersects those two edit your presentation you are able to never have to return to your HTML file so if that’s confusing to you that’s okay it should be really prevent that in the back of your head your HTML calls should never be pondering of the styling of your sheet now that said should be going if we want to make this text italic by default we would use what’s known as emphasis calls and that is em4 emphasis notice that we’re not saying italic we’re saying this text should receive emphasis and by default we can provide emphasis by position in italics though if you decided last-minute you required that emphasis to be displayed in a different way you could do the exact same thing from that stylesheet that we talked about so hopefully that makes a glimmer of impression I’m gonna come back refresh the page and sure as shooting the verse is now italic so your first envisage might be now what is telling this browser to display this as italic we have markup and we’ve told it to be emphasized but as we learned that really has little to do with visuals it’s more describing the contents this material should be strong this material should be a list item this content should be emphasized we’re not saying adventurous we’re not saying italic we’re not saying font length 50 but nonetheless this text is italic how come and it’s because browsers have a built-in and we call this a default stylesheet it’s a sheet if you’ve ever heard the call CSS this is what we’re referring to style expanses they describe how the content should be displayed on the page now most browsers agree on a few default items and some of those are that strong points should be bold emphasized or M components is advisable to italic that said you have 100% button to invalidate those default stylings and we announce this a reset it says to each browser we want you to reset all your default styling because we want to specify our own don’t worry about that just yet we’re still learning markup but preserve all of this in the back of your spirit so now you would think we can just add as much as we want here but we need to structure our and we’ll do that in the next assignment

As found on YouTube

Share this article

Leave a comment

Related Posts