| Say Hello to HTML Elements |
- You can edit code in a text editor.Some popular text editors are Sublime Text, Atom, and Brackets.
- Most HTML elements have an opening tag
<> and a closing tag </>. - The only difference between opening tags
<> and closing tags </> is that closing tags have a slash / after their opening angle bracket. The word immediately after the opening < or </ is the element name.
|
<h1> SOME TEXT HERE </h1> |
| Headline with the h2 Element |
- Elements tell the browser about the structure of your website.
h1 elements are often used for main headings, and h2, h3, h4, h5 and h6 elements can be used for sub-headings.
|
<h1> Main Heading </h1>
<h2>Second Heading</h2>
<h3>Third Heading</h3> |
| Inform with the Paragraph Element |
p elements are used for normal-sized paragraphs of text.
|
<p> SOME TEXT HERE </p> |
| Uncomment HTML |
- You can make comments inside your code that will not affect the output of the code.
- To make a comment in HTML, put
<!-- and --> before and after what you want to comment. - "Uncomment" means "remove the comment tags" (
<!-- and -->)
|
<!-- <h1> This heading will not show up. </h1> -->
<h1> This heading will show up. </h1> |
| Comment Out HTML |
- Comments are also a good way to temporarily deactivate part of your code.
|
<!-- <h1> deactivated heading </h1> -->
<p>active paragraph</p> |
| Fill In the Blank with Placeholder Text |
- Lorem Ipsum is a section of meaningless text that is used as a placeholder. Read more here
- Placeholder text is used when you want to see how content will look in your design, but you don't have the real content yet.
- "Kitty ipsum" is FCC's custom version of lorem ipsum. Here are some more fun ones: Khaled Ipsum, Hipster Ipsum, Cat Ipsum, Corporate Ipsum
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> |
| Delete HTML Elements |
- Really? You want to know how to delete an element? Try the backspace key...
|
There aren't any elements here. I guess I deleted them. Oops! |
| Change the Color of Text |
- You can put attributes (additional pieces of information) right after the element name, inside the opening tag.
- Most attributes follow the format:
attribute="...". - You can change the color (font color) of an element by using the style attribute:
style="color: ..."
|
<p style="color: purple">
this text will be purple
</p> |
| Use CSS Selectors to Style Elements |
- You can also change the way an element looks by using CSS style rules. Your CSS will go inside a
style element. - CSS style rules have the format:
selector { property: value; } - You can use any element name (like
h2 or p) in front of the brackets to select all elements of that type.
|
<style>
h2 { color: purple; }
</style>
<h2> This will be purple. </h2>
<p> This will not be purple.</p> |
| Use a CSS Class to Style an Element |
- The HTML
class attribute is used for elements that have something in common. It looks like this:
class="class-name" - To select elements with a certain class in CSS, use a period
. followed by the class name:
.class-name { ... }
|
<style>
.yellow { color: yellow; }
</style>
<h2 class="yellow"> This will be yellow. </h2> |
| Style Multiple Elements with a CSS Class |
- Because classes are used for grouping elements, you can add the
class attribute to as many elements as you want.
|
<style>
.yellow { color: yellow; }
</style>
<h2 class="yellow"> This is yellow. </h2>
<p class="yellow"> This is also yellow. </p> |
| Change the Font Size of an Element |
- You can change the font size (the size of text) by using the CSS
font-size property. - One of the most common ways to measure font size is in pixels (
px). The default font size on Chrome is 16px. - It is also common to measure font size in ems (
em). A font size of 2em will be twice as big as normal text.
|
<style>
h2 { font-size: 2em; }
p { font-size: 20px; }
</style>
<h2> This is bigger. </h2>
<p> This is big. </p> |
| Set the Font Family of an Element |
- You can change the font family (the style of text) by using the CSS
font-family property. - You can use the keywords
serif, sans-serif and monospace to use the browser's default font for those font styles. - You can add more than one
property: value; pair to your style rules, just keep the opening bracket { on the same line as the selector.
|
<style>
p {
font-size: 20px;
font-family: sans-serif;
}
</style>
<p> This is big sans-serif text. </p> |
| Import a Google Font |
- You can also use the name of a specific font to set the font family.
- You can use a basic set of fonts available on your computer (such as
Arial, Helvetica, or Times New Roman) or you can import another font from Google Fonts or somewhere else. - You can link to another file, such as a CSS file, with a
<link> element.
|
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<style>
h2 { font-family: Quicksand; }
</style>
<h2> Heading in the Quicksand font </h2> |
| Specify How Fonts Should Degrade |
- Not all fonts and features work in all browsers. Sometimes we have to fall back, or degrade, to a different option.
- You can include a list of font names for the CSS
font-family property, and the browser will use the first one that it can. - The font names should be separated by a comma
,. Usually keywords such as sans-serif come last.
|
<style>
p { font-family: Arial, sans-serif; }
</style>
<p> If the computer doesn't have Arial, it will use whatever sans-serif font it has. </p> |
| Add Images to Your Website |
- You can add an image with an
<img> element. - The
src attribute contains the image address (often ends in .jpg or .png), and the alt attribute contains alternative text to display if the image cannot be loaded. - Elements that only use one tag, such as
<link> and <img>, are called self-closing elements.
|
<img src="https://pbs.twimg.com/media/C2JNQhqXcAA_j71.jpg" alt=".jpg photo of Crater Lake under the stars">
<img src="https://unsplash.it/600/400?random" alt="random photo via the unsplash.it API"> |
| Size Your Images |
- You can use the CSS
width property to set an element's width. - Common CSS measurements are
px, em, or %.
|
<style>
img { width: 300px; }
h2 { width: 50%; }
</style> |
| Add Borders Around Your Elements |
- To make a border in CSS, use the
border-width, border-style, and border-color properties. - You can also use the shorthand
border property to set border width, style, and color at the same time. - The HTML
class attribute allows more than one value inside the same quotes.
|
<style>
.purple-border { 1px solid purple; }
.blue-border {
border-width: 1px;
border-style: solid;
border-color: blue;
}
.orange-text { color: orange; }
</style>
<p class="orange-text blue-border"> orange text with blue border </p> |
| Add Rounded Corners with a Border Radius |
- The CSS
border-radius property is used to round the borders of an element.
|
<style>
.rounded { border-radius: 2px; }
</style>
<img class="rounded" src="..." alt="..."> |
| Make Circular Images with a Border Radius |
- If your element has the same height and width, any
border-radius value that is 50% of the element's size or greater will result in a circle.
|
<style>
.circle-image {
width: 100px;
height: 100px;
border-radius: 100px;
}
</style>
<img class="circle-image" src="..." alt="..."> |
| Link to External Pages With Anchor Elements |
- You can use an
a element, or "anchor" element, to put a link on your page. - The
href attribute contains the link's URL, and the link text goes inside (between the tags of) the a element. <a></a> vs. <link>: An a element allows the user to click on it and go to another page or section, while a link element is used for linking to files and does not display anything.
|
<a href="https://unsplash.com"> beautiful public domain photos </a> |
| Nest an Anchor Element Within a Paragraph |
- "Nest" means "put one thing inside another thing".
- Each HTML element is actually a box - think of the opening <> and closing </> tags as the sides of the box. photo of nested boxes
- To put something "inside" an element, you put it between the opening and closing tags of the element. (NOT inside one of the tags).
|
<p> Link inside paragraph: <a href="https://example.com"> text inside link </a> </p> |
| Make Dead Links Using the Hash Symbol |
- If you don't have a specific URL for a link yet, you can set the
href attribute to # to create a dead link. That way the a element will still look and behave as a link. - The value of an attribute refers to the part inside quotes:
attribute="value".
|
<a href="#"> dead link </a> |
| Turn an Image into a Link |
- You can put HTML elements inside
a elements instead of just plain text.
|
<a href="https://unsplash.com"> <img src="http://bit.ly/2jlBgBE" alt="Unsplash logo"> </a> |
| Create a Bulleted Unordered List |
- You can use a
ul element to create an "unordered list", where the items in the list are not numbered. - Each item in the list will be inside a
li, or "list item", element. ul elements are used for bullet point lists, like this one :), and also for navigation lists on web pages.
|
<ul>
<li>You can use a ul element to create an "unordered list", where the items in the list are not numbered.</li>
<li>Each item in the list will be inside a li, or "list item", element.</li>
<li>ul elements are used for bullet point lists, like this one :), and also for navigation lists on web pages.</li>
</ul> |
| Create an Ordered List |
- You can use an
ol element to create an "ordered list", where the items in the list have a number (default) or a letter. - The
ol element contains li elements for each list item.
|
<ol>
<li> Thing I need to do first </li>
<li> Thing I need to do second </li>
</ol> |
| Create a Text Field |
- An
input element is used to get input from the user. It is self-closing (no end tag): <input> - The
type attribute defines what kind of input it can get from the user. There are over 20 possible types of input. - An
input element with type="text" will create a text field where the user can enter text.
|
<input type="text">
<input type="number">
<input type="date"> |
| Add Placeholder Text to a Text Field |
- You can put a
placeholder attribute inside an input element to give the user an example of what they need to type. - The placeholder text will show up as faded text inside the input element, and will disappear as soon as the user starts typing.
|
<input type="text" placeholder="@my-username"> |
