Html (hypertext markup language)
- 1. HTML (HYPERTEXT MARKUP LANGUAGE)
- 2. INTRODUCTION TO HTML • What is HTML? • HTML is the language used to create the websites you visit everyday. It provides a logical way to structure content for websites. • Let's analyze the acronym "HTML," as it contains a lot of useful information. HTML stands for HyperText Markup Language. • A markup language is a computer language that defines the structure and presentation of raw text. Markup languages work by surrounding raw text with information the computer can interpret, "marking it up" to be processed.
- 3. !DOCTYPE • Whether you realize it or not, when you read text, your brain must first identify the text's language. If you can understand that language, then your brain immediately begins to interpret the text. This same process happens whether you're reading a street sign, a book, or a name tag. • Web browsers work in a similar way. They must know what language a document is written in before they can process its contents. • You can let web browsers know that you are using HTML by starting your document with a document type declaration.
- 4. • The declaration looks like this: <!DOCTYPE html> • This declaration is an instruction. It tells the browser what type of document to expect, along with what version of HTML is being used in the document. • <!DOCTYPE html> must be the first line of code in all of your HTML documents. If you don't use the declaration, your HTML code will likely still work, however, it's risky. For now, the browser will correctly assume that the HTML in <!DOCTYPE html> is referring to HTML 5 as it is the current standard. • To make sure your document is forever interpreted correctly, always include • <!DOCTYPE html> at the very beginning of your HTML documents.
- 5. • The <!DOCTYPE html> declaration is only the beginning, however. It indicates to the browser that you will use HTML in the document, but it doesn't actually add any HTML structure or content. • To create HTML structure and content, we must add opening and closing <html> tags, like so: • Anything between the opening <html> and closing </html> tags will be interpreted as HTML code. Without these tags, it's possible that browsers could incorrectly interpret your HTML code.
- 7. • HTML Anatomy • Before we move forward, it's important that we discuss how HTML elements are structured. • In this example, the paragraph element is made up of one opening tag <p> , the “Hello world!” text, and a closing tag </p> • Let's quickly review each part of the tag pictured: • HTML Tag - The element name, surrounded by an opening (<) and closing (>) angle bracket. • HTML element (or simply, element) - a unit of content in an HTML document formed by HTML tags and the text or media it contains. • Opening tag - the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets. • Element content - The information (text or other elements) contained between the opening and closing tags of an HTML element. • Closing tag - the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket. • Most elements require both opening and closing tags, but some call for a single
- 8. THE HEAD • So far we've done two things: • Declared to the browser that your code is HTML. • Added the HTML element <html> that will contain the rest of your code. • Let's also give the browser some information about the page. We can do this by adding a <head> Element.
- 9. • element contains the metadata for a web page. Metadata is information about the page that isn't displayed directly on the web page. You'll see an example of this in the next exercise. • The opening and closing head tags <head></head> typically appear as the first item after your first HTML tag.
- 10. PAGE TITLES • What kind of metadata about the web page can the <head> element contain? • The browser displays the title of the page because the title can be specified directly inside of the <head> element, by using a title tag. • If we were to open a file containing the HTML code in the example above, the browser would display the words “my first webpage” in the title bar (or in the tab's title).
- 11. THE BODY • We've added some HTML, but still haven't seen any results in the web browser to the right. Why is that? • Before we can add content that a browser will display, we have to add a body to the HTML file. Only content inside the opening and closing body tags can be displayed to the screen. • Once the file has a body, many different types of content – including text, images, and buttons – can be added to the body.
- 12. SELF-CLOSING TAG • Thus far we have only seen HTML elements with an opening and a closing tag. A few types of elements, however, require only one tag. • Self-closing elements contain all the information the browser needs to render the element inside a single tag. Also, because they are single tags, they cannot wrap around raw text or other elements. • The line break element <br /> is one example of a self-closing tag. You can use it anywhere within your HTML code. The result is a line break in the browser. • Without the break tag, the browser would render line one and line two on the same line.
- 13. HTML STRUCTURE • HTML documents are organized as a collection of parent-child relationships. When an element is contained inside another element, it is considered the child of that element. The child element is said to be nested inside of the parent element.