1
HTML BASICS COMM380 | Interactive Media Design | Ron Romain <html> <head> </html> </head> <body> </body> HEAD: Contains info about page (e.g. title and metadata), styling (e.g. CSS rules) and interactivity (e.g. javaScript). BODY: Holds content of web page which shows in browser window. HTML uses ELEMENTS to describe the structure of web pages. Elements are like containers, or boxes, that hold content, plus structure and styling information. All Elements must have an OPENING TAG and a CLOSING TAG. The opening tag is like the bottom of a box, the closing tag is like the lid. The CONTENT goes inside the box. In the below example, the Element has an opening paragraph <p> tag and a closing </p> tag that contain and define the content (words): <p>Homer Simpson loves donuts.</p> In this example there is an italic <i> element inside of the <p> element (yes, you can put boxes inside of boxes): <p>Homer Simpson <i>loves</i> donuts.</p> It would look like this in a browser: Homer Simpson loves donuts. ATTRIBUTES provide additional informa- tion about the contents of an element. They are comprised of two parts: a NAME and a VALUE. This example tells the browser to align paragraph to right. There are two types of Elements: BLOCK-LEVEL and INLINE. Block-Level Elements, such as <h1> (Headline) and <p> elements always appear on a new line. Inline Elements, such as <i> and <b> (Italic and Bold) elements, sit within a block-level element and do not start on a new line. An <img> (Image) is an Inline Element, but can also exist independently from other elements. EMPTY CONTAINER Some Elements do not have content and can therefore be “self-closing”, such as a line break element: <br /> <br /> <p> </i> <i> </p> <h1>Homer Simpson loves donuts.</h1> <p>Homer Simpson <b>loves </b> donuts.</p> <p>Homer Simpson <img src="images/homer.jpg" /> loves donuts.</p> or <img src="images/homer.jpg" /> <p>Homer Simpson loves donuts.</p> <p align="right">Homer Simpson loves donuts.</p> NAME VALUE
![HTML –I [Basics HTML Elements] - GitHub Pages...HTML –I [Basics HTML Elements] Informatics Practices Class XII Chapter 11: By- Rajesh Kumar Mishra PGT (Comp.Sc.) KV No.1, AFS,](https://static.documents.pub/doc/80x56/5ec6a2d61e6ca6370b5bc484/html-ai-basics-html-elements-github-pages-html-ai-basics-html-elements.jpg)
