Scribd
Upload
78 views

Heading h6 Is The Smallest.: HTML Stands For Hypertext Markup Language, and Is Used To Give A Webpage Structure

HTML stands for hypertext markup language and is used to structure webpages. The document defines several key HTML elements - headings (h1-h6), paragraphs (p), links (a), images (img), videos, lists (unordered and ordered), divisions (div), and metadata tags. It also discusses parent-child relationships between elements and how to use CSS to style elements by selector and class.

Uploaded by

Stoica Ioana Cristina
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
78 views

Heading h6 Is The Smallest.: HTML Stands For Hypertext Markup Language, and Is Used To Give A Webpage Structure

HTML stands for hypertext markup language and is used to structure webpages. The document defines several key HTML elements - headings (h1-h6), paragraphs (p), links (a), images (img), videos, lists (unordered and ordered), divisions (div), and metadata tags. It also discusses parent-child relationships between elements and how to use CSS to style elements by selector and class.

Uploaded by

Stoica Ioana Cristina
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML stands for hypertext markup language, and is used to give a webpage structure.

h1 - h6: indicate text headings on a webpage. h1 is the largest


heading; h6 is the smallest.
<h1>Heading</h1>

p: used for non-heading text, such as the bodies of articles or


company descriptions.
<p>Description of company here.</p>

a: short for anchor and used to add links to other webpages. Anchor
elements typically have an href attribute:
<a href="http://codecademy.com">Click here</a> to learn how to make a
website!

img: used to add an image to a webpage. Image elements are selfclosing and do not require a closing tag:
<img src="https://images.com/favorite.png">

video: used to add videos to a webpage, and uses multiple attributes


and a nested source element:
<video width="320" height="240" controls> <source src="https://movies.io/greatclip.mp4" type="video/mp4"> </video>

unordered list: used to create lists on a webpage and requires li


elements inside a ul:
<ul> <li>list item</li> <li>another item</li> <li>yet another</li> </ul>

div: used to organize HTML elements into different groups, which can
be given a class attribute:
<div class="main"> <h2>Subheading!</h2> </div>

metadata tags: provide metadata about a webpage.

WEB CONCEPTS

parent/child elements: used to describe HTML elements that enclose


or are enclosed by other elements. For example, below the ul is the parent
and the li items are children
You can start a comment with <!-- and end a comment with -->

Here's how you would set your h2element's text color to blue:
<h2 style="color: blue">CatPhotoApp</h2>

That's one way to add style to an element, but a better way is by using CSS, which
stands for Cascading Style Sheets.
At the top of your code, create a styleelement like this:
<style>
</style>

Inside that style element, you can create a CSS selector for all h2 elements. For
example, if you wanted all h2elements to be red, your style element would look like
this:
<style>
h2 {color: red;}
</style>

You can apply a class to an HTML element like this:


<h2 class="blue-text">CatPhotoApp</h2>

Note that in your CSS style element, classes should start with a period. In your
HTML elements' class declarations, classes shouldn't start with a period.

<style>
.red-text {
color:red;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>

Now, let's import and apply a Google font (note that if Google is blocked in your
country, you will need to skip this challenge).
First, you'll need to make a call to Google to grab the Lobster font and load it into
your HTML.
Copy the following code snippet and paste it into the top of your code editor:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"


type="text/css">

Now you can set Lobster as a font-family value on your h2 element.


Apply the font-family of Lobster to your h2 element.

You can add images to your website by using the img element, and point to a specific
image's URL using the srcattribute.
An example of this would be:
<img src="https://www.your-image-source.com/your-image.jpg">

All img elements must have an altattribute. The text inside an altattribute is used for
screen readers to improve accessibility and is displayed if the image fails to load.
Lets add an alt attribute to our imgexample above:
<img src="https://www.your-image-source.com/your-image.jpg" alt="Author
standing on a beach with two thumbs up. ">

Note that in most cases, img elements are self-closing.


Try it with this image:
https://bit.ly/fcc-relaxing-cat

Create a Bulleted Unordered List

HTML has a special element for creatingunordered lists, or bullet point-style lists.
Unordered lists start with a <ul>element. Then they contain some number of <li>
elements.
For example:
<ul>
<li>milk</li>
<li>cheese</li>
</ul>

would create a bullet point-style list of "milk" and "cheese".

Create an Ordered List

HTML has a special element for creatingordered lists, or numbered-style lists.


Ordered lists start with a <ol> element. Then they contain some number of<li>
elements.
For example:
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>

would create a numbered list of "Garfield" and "Sylvester".

Create a Text Field

Now let's create a web form.


Text inputs are a convenient way to get input from your user.
You can create one like this:
<input type="text">

Note that input elements are self-closing.


Create an input element of type textbelow your lists.

Bootstrap examples
http://v4-alpha.getbootstrap.com/examples/

You might also like