It’s time to get your hands dirty and write your first HTML file. Let’s begin by opening a text editing program. If you are on a Microsoft Windows PC open the program named Notepad (look in your Start Menu for it, or simply hold down the Windows Key on your keyboard and press R, then type “notepad” into the run command prompt and press enter). If you are using a Macintosh computer, launch the application named “TextEdit” (which can be found in your Apps folder). Show
As a coder, it is our job to turn this blank canvas of a document into a HTML masterpiece. Let’s begin by entering the following code into our blank text document, (or utilize your computer’s copy and paste function and lift it directly from below): <!DOCTYPE html> This code tells the web browser what computer language we are using (HTML). You will begin every web page you ever create with this code. Writing HTML is Like Making SandwichesWe are now ready to begin the actual structure of our page. Begin by adding the following code to your document, directly below our last piece of code: <html> </html> The start-tag <html> tells the web browser that we want to begin our document; similarly the end-tag </html> tells the browser we want to end our document. If our page is a sandwich, the <html> start and end tags are the slabs of bread. Before we can add any exciting content to our page, there is one more element we must add. Insert the following code directly beneath the <html> start tag: <body> </body> The <body> element signifies the portion of our document that will house our actual content (paragraphs, images, etc…). You may be thinking “But I thought that’s what the <html> tags did?” In fact, the <html> element houses everything, both our actual content (which goes inside the <body> element) and more complex elements that we will learn about in future lessons. For now, just know that the <body> element goes inside the <html> element. This is what your document should look like so far: <!DOCTYPE html>
<html>
<body>
</body>
</html>Finally, The Fun PartNow, let’s add our first bit of content to our page! How about a big bold heading? Add the following code underneath the <body> start tag: <h2>This is a big bold heading</h2> This code raises a good question for the beginning coder: “How am I supposed to know what element to use? How did you decide on using the <h2> tag?” We decided to use the <h2> element to describe our heading because this is the most important (and only) heading on our page. In future lessons we will create pages with multiple headings and utilize <h2>, <h2>, and <h3> tags to create a hierarchy of importance for our content. Russian Stacking DollsAt this point, it is helpful to think of HTML as a set of Russian stacking dolls. Smaller elements fit inside larger elements, which fit inside even larger elements, etc… Our header rests inside our <body> element, which rests inside our <html> element. To fully illustrate this point, let’s add a bulleted list to our page. Add the following code directly beneath your </h2> end tag: <ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>The <ul> element is code for “Unordered List” and the <li> element is code for “list item.” Just like your grocery list on a scrap of paper, a list is made up of multiple list items. This is reflected in our code; our many list items are nested inside our single unordered list. Saving Your DocumentNow is a good time to save our document and then see how it looks in our web browser. From within your text editing program, click File, and then Save. Just so we’re on the same page, let’s agree to name the file “test.html”. It is very important that our file ends with the “.html” extension. This tells our computer what type of file our document is (a web page of course!).  Viewing Your File In a Web BrowserNow navigate to wherever you chose to save your file (I recommend creating a new folder on your desktop to store all of your learning files) and double click “test.html.” This should open our page in a web browser and you should be greeted by a rather simple looking header which reads “This is a big bold heading” followed by a bulleted list of grocery items. Giving Your Page a TitleYou may have noticed that our page doesn’t have a title (usually displayed in the title bar of our web browser). Web page titles are an absolute necessity, as they play a huge roll in search engines being able to find your pages. Now that you are a little more familiar with the syntax of HTML, let’s go ahead and give our page a title. The <title> element should be stored in a new section of the page named <head>. In future lessons you will learn more about the <head> element, but for now just know that it is used to hold our page’s title. Add the following code directly below our <html> start tag: <head>
<title>My First Page</title>
</head>From within your text editing program, save your document, and then switch to your web browser window and refresh the page (pressing Control + R refreshes on a Windows PC, and Cmd + R refreshes on a Macintosh computer). Notice that our page now has a title in the web browser title bar. Just One Last Step!Before we finish this lesson, let us add a bit more code that will help all web browsers better understand our code. Insert the following line of code directly below the <head> start tag: <meta charset="utf-8"> This marks the first time you’ve seen an equal sign or quotation marks inside an HTML element. You will learn about this new syntax in the next lesson (HTML Attributes and Values) but for now just be content with copying and pasting this code and knowing that it makes your page complete! You just wrote a 100% valid web page from scratch! By hand! That is more than some professional web developers can say. Remember, no one ever promised that your first web page would be beautiful! What’s important is that you now know how to write your own HTML code and create basic web pages. You may think “Yes, but I don’t know all of the element codes. Without someone telling me which element to use to describe a piece of content I’ll be lost!” Let me offer you some words of comfort: you already know more than you realize. I would estimate that 95% of websites use the same basic collection of HTML elements that a beginner can master quickly and easily. Follow the rest of my lessons and you will be completely proficient in writing HTML in no time! For your reference, here is the code we just put together, in its entirety: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>
<body>
<h2>This is a big bold heading</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>If you prefer to watch video lessons instead of reading written lessons check out my 8 hour video course and learn pro-level HTML, CSS, and responsive design. What is the simple text file created using HTML?webpage is a simple text file created using HTML. it is a hyper text document created by using HTML.. the full form of HTML is hyper text markup language.. a webpage gives access to many websites.. websites could include all the social platforms as well as business platform.. the word webpage is a metaphor.. Why does my HTML file open as text?If your HTML files are opened as a Text Plain file, it is likely that you do not have an open program correctly configured for this type of files (for example, you have configured the notepad instead of the browser).
Why is my HTML code not working?Make sure your editor is set to plain text so no special characters are inserted into your HTML and CSS. If you're having problems, look at the source using the “view source” menu (in Safari, View > Source). This will often uncover problems like special characters that you might not be seeing in your regular editor.
How does HTML help solve the problem of telling a computer what goes on a web page?A: A: HTML tells your browser about the structure of your document: where the headings are, where the paragraphs are, what text needs emphasis, and so on. Given this information, browsers have built-in default rules for how to display each of these elements.
|
What happens when a basic text file without any html code is opened in a web browser?
zusammenhängende Posts
Urheberrechte © © 2024 nguoilontuoi Inc.
