Media and Web Development
ICOM-101-01 / MTEC-617-01
Week 2 ● Introduction to HTML
Elements and Tags
In HTML, tags and elements are used to structure and format the content of a webpage. HTML tags are represented by angle brackets, and they are used to mark the beginning and end of an element.
LAYOUT
Layout in HTML refers to the way that the content of a webpage is arranged and displayed on the screen. There are several different ways to create a layout in HTML, and the method you choose will depend on the specific needs of your webpage.
The CodePen Environment
CodePen is an online editor that allows users to write and run code in a variety of programming languages, including HTML, CSS, and JavaScript. It is a popular platform for web developers and designers to prototype, test, and share their code with others.
ELEMENTS
An element is the atomic unit of HTML.
All web pages are made up of elements.
There are many elements in HTML, some are redundant, and some are outside the scope of this course.
These are some of the really important ones.
All web pages are made up of elements.
There are many elements in HTML, some are redundant, and some are outside the scope of this course.
These are some of the really important ones.
With these building blocks, we can build almost anything on the web.
Elements and Tags in Code
We define elements in our code with tags
The opening tag is the tag name inside of angle brackets.
And then closing tag - the tag name, preceded by a slash, inside angle brackets.
HTML BASICS
HTML has a tree strucure. This means you can embed tags within other tags to form more complex structures.
Inline vs Block Elements
Broadly speaking, each HTML element has 1 of 2 layout patterns.
Inline elements which do not create a new line on the page.
Block elements which exist on their own lines.
Inline elements which do not create a new line on the page.
Block elements which exist on their own lines.
Homework
1. Make an account on Glitch
2. Design and code a "document" with html on glitch
○ Think about creating a Resume or CV, a simple flier for an event, liner notes for an
album, or credits for a film. Think about using Iframes from the media you
already have online. Go as far and be as creative as you like.
○ Make sure to use different heading levels with h1 through h6 tags ( at least 2
different heading levels )
○ use the p tag to format text into paragraphs
○ divide your content into sections with div, section, or article tags
○ add emphasis with em and strong tags
○ Extra Credit : Use an a tag to link to another website
○ Extra Credit : Use an img tag to display an image
2. Design and code a "document" with html on glitch
○ Think about creating a Resume or CV, a simple flier for an event, liner notes for an
album, or credits for a film. Think about using Iframes from the media you
already have online. Go as far and be as creative as you like.
○ Make sure to use different heading levels with h1 through h6 tags ( at least 2
different heading levels )
○ use the p tag to format text into paragraphs
○ divide your content into sections with div, section, or article tags
○ add emphasis with em and strong tags
○ Extra Credit : Use an a tag to link to another website
○ Extra Credit : Use an img tag to display an image
