From the course: Getting Started as a Full-Stack Web Developer

Display information with HTML

From the course: Getting Started as a Full-Stack Web Developer

Start my 1-month free trial Buy for my team

Display information with HTML

“

- HTML is the foundation for every web page. A web developer might use a half dozen other languages like JavaScript or Python, but people only see the results of those programs in a web browser because of HTML. So understanding it is crucial for every web developer. One way to see the HTML code of a page in Chrome is by going up to the View menu then to Developer and then to Inspect Elements. What I really want you to see here is the structure which is evident if I go down and close this body tag by clicking on the little triangle. Now we see what every properly constructed HTML page looks like. The structure is a head section, a body section. Both of them wrapped up inside of HTML tags. There's also this somewhat optional doc type declaration at the top. Inside the head and body sections are a variety of other HTML codes known as tags. Some tags have both opening and closing parts. Both parts are contained within angle brackets. As you see here with the closing part indicated with a / before the tag name, this tag means show the text hello with a header one appearance. There can also be multiple layers of tags. Here the Hello text is displayed in both bold and italic because of the b and i tags. Some tags have only one part. They can't encompass other things they're written as you see here open bracket tag space slash closed bracket. The example here draws a horizontal rule. That is a line on the page. Most tags also have options called attributes which are put inside the brackets after the tag. Some of these change what the tag does. For example, the IMG tag for images has a required SRC attribute to say what image files should be displayed. SRC means the source. And there's an optional alt attribute for the text to display if the image isn't available Some attributes identify the element, ID and class are two very common such attributes, programming languages, such as CSS, PHP, and JavaScript can affect page elements based on their IDs and classes. Attributes are formatted as something called key value pairs. First is the key. In the last example, there that's the word class. And then the value in quotes in this case indented. Then there are tags that are used to show that the page includes code from somewhere else. Script, iframe and link are three examples. All of these examples are in this videos exercise file with comments. I've made a copy to my desktop. I'll open it in my code editor by dragging it on top of the visual studio code icon right here. The code editor knows that it's an HTML file because the file name ends with .HTM or .HTML. So we see all this nice syntax coloring here. Now I'll close this out, go back to my desktop, hide everything else and drag it instead to Google Chrome. So we can see it in the browser. Now, if I go to View, Developer and View Source, we see the source as the browser received it. Now we can go back to the Landon hotels homepage and make a little more sense of what's happening. We start with an HTML tag that has an attribute Lang equals E N and so on all the way down the page. And you can do this with any page on the internet. Start trying this, go to a website you like. View the source and poke around. You won't understand most of the details yet but you will get a sense of how pages are structured in HTML. When you're ready to dig in deeper. My preferred reference guide is developer.mozilla.org Just go up to technologies and then to HTML and you'll find months worth of free education. And naturally we have lots of courses on LinkedIn learning that'll help including the very popular HTML essential training.

Contents