- A Web page consists of an HTML file, plus any image (picture) files used on the page.
- The HTML file (a normal text file) contains all the text to display, and also acts as the "glue" to hold the text and images together in the right places, and display them in the right style.
HTML Tags
- HTML tags are keywords surrounded by angle brackets like < />
- HTML tags normally come in pairs like start and end tags are also called <opening tags> and </closing tags>
HTML Documents = Web Pages
- HTML documents describe web pages
- HTML documents are also called web pages
- HTML documents contain HTML tags and plain text
plain text
- Term for data that represent only characters of readable material but not its graphical representation, code or objects.
Analogy: HTML is like the Architecture of the house
HTML is standardized (meaning all developers use the same tags/code) so that the code is compatible with all browsers. Imagine if an architect ignored the rules of physics or tried to use a material to do something it is not capable of—the house would fall down.
HTML states the contents and structure:
- There is a house.
- It has two windows.
- It has one door.
- It has a roof.
Example
Example Explained
- The <!DOCTYPE html> declaration defines that this document is an HTML5 document
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the HTML page
- The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
- The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
- The <h1> element defines a large heading
- The <p> element defines a paragraph
- The <div> element defines a division—is helpful to use to contain content in certain sections to style using CSS.
- The <!--Comment--> element is very useful to use to create notes/clues to reference. Comments are not visible in the browser.
- The <ol> element is used to create an ordered list (uses numbers).
- The <ul> element is used to create an unordered list (uses bullets).
- The <li> element is used to identify a list item within an unordered/order list.
Div tags (#) and Selectors
You need to create structure within the <body> tag to hold your images and build your website. First you need to decide what the wireframe structure is:
- #header signifies an ID Selector and can be named anything, but can only be used once per HTML page. Since it can be named anything it doesn’t always imply the meaning of the element (HTML 4).
- Selectors without the # before it, such as “header” are HTML5 elements and can be used more than once in a single HTML page.
- Selectors with a . (period) before it, are classes and can be used more than once in a single HTML page.