Chapter 1: Basics of Web Design HTML5 & CSS

Hello and welcome. This video tutorial is going to demonstrate how to create a web page document employing the text editor Brackets. In order to create your first web page or project you are going to want to establish a folder. Folders are useful ways to organize your files as you develop web pages. I am working on a Windows computer. You are going to want to choose the location that you would like to store your work such as the Documents folder. For clarity purposes I am going to create a folder on my Desktop. I am going to go ahead and right-click and I am going to choose New Folder. I am going to make sure that the folder name begins with lowercase characters and that there is no space between any of the words( or figure ). Since the purpose of this video demonstration is for a course that I am schooling I was just going to reputation this folder cis1 52 and I am going to press the Enter key. I am going to open up my Bracket software and I am going to find the folder on my Desktop. I am going to go to File –> Open folder Desktop cis1 52 and select folder. This makes the Brackets software are aware that I just wanted to store the documents that I will be creating for this course. In the hands-on practice exercise we are going to go ahead and create a new folder inside of the cis1 52 folder. So I am going to right-click in this dark area on the left side of my screen and I am going to say New folder and I am going to call this folder chapter1. Notice it is all in lowercase and there is no space after the list. I am going to right-click on my chapter1 folder. Inside of this chapter1 I am going to create a new file and it is going to be called index.html and I was just going to made Enter. Notice that this file is blank. I am going to go ahead and compose the doctype and the HTML markup for this index file. Now I could type all of the information collected but since I ran onward and I installed Emmet I am going to go ahead and use the shortcut dominate that Emmet has available to me. To be able to know what those shortcut authorities are I am going to go out to my browser and I have open the documentation for Emmet and the cheatsheet. So its under docs.Emmet.IO cheat sheet and I am under this section where it says HTML. So to be able to create the doctype information it is telling me all that I it is necessary do is type an exclamation pitch and then the tab key.So I am going to go back into Bracket. I am going to type the exclaiming station and then select the tab key. And voila! Every webpage that you make will include the document type definition commonly called a document type statement and it is the firstly argument of the web page. The HTML head, entitlement, meta, and figure aspects are the basics of an HTML5 web page with certain exceptions of the specific page title. The first seven threads were typically be the same on every web page that you initiate known as the doctype statement has its own formatting and that all of the HTML tags all utilize lowercase characters. The purpose of the HTML element is to indicate that the document is HTML formatted. The HTML element tells the browser how to interpret the above-mentioned documents. The opening HTML tag is targeted below the doctype and the closing HTML tag is at the end of the webpage. Inside of the HTML tag is an facet which further describes the function of an element.The lang or word dimension specifies the spoken language of the document. After the lang dimension is an equal sign and between the double quotation marks is the value “en”. en indicates indicates the English language. The chief aspect contains a president slouse which begins with an opening and closing head tag. There was still two other aspects in the foreman part. The meta aspect describes a characteristics of a web page such as the character encoding. Character encoding is the internal representation of letters counts and symbols. The meta tag is a standalone self-contained tag and therefore it does not have a closing tag. The meta call uses the charset attribute to indicate the character encoding.For our purposes we will use utf-8. The title part will hold the text that is included in the entitle disallow of the browser opening. This text is known as the name of the webpage. The entitle text is retrieved when web pages are bookmarked and printed. Search locomotives use the title text to help to determine keyword relevance. Using a explanatory entitle will help in search engine optimization. Let us alter our title text to First HTML5 Web Page. I am going to go after the closing intelligence call and I was just going to set my cursor between the opening and closing body labels. Inside the opening and closing body aspect is where verse, graphics, and likeness will display immediately on the web page. Within the browser space I am going to go ahead and form in “Hello world” and an ejaculation place. I have just originated the source code for my first web page. I am going to go ahead and save my job by going up to the File menu and picking Save and I am going to go ahead and preview this in a browser. I am going to go over to the little lightning bolt on the right hand side.I am going to select this and I am going to choose Live preview and notice it says Hello World. The verse typed between the opening and closing body tags is what is displaying on the web page in my browser viewport. This is all that will display in the browser window. Notice at the top of this webpage is my title tag. This is the title of my webpage. This concludes this lesson ..

digital marketing

As found on YouTube

Share this article

Leave a comment

Related Posts