Coding

HTML & CSS
Goal 1: really understand and make things in html and css
HTML provides structure
Hyper text markup language
Markup language enables the computer to interpret text
Hypertext provides links to other text
PART ONE
1: First thing to do declare that you are using a language to the web browser:
starting your HTML document with a document type declaration.
<!DOCTYPE html>
PART TWO
2: opening and closing tags (anything is between would be read as code)
<html>
</html>
(funcionan como { en java)
PARENTHESIS: VOCAB
Angle brackets: <>

Html element: what lives inside brackets
Opening tag: the first html tag used to start an html element
Closing tag: end html element after /
added the HTML element (<html>) that will contain the rest of your code.
The <head> element will contain information about the page that isn't displayed
directly on the actual web page
The browser displays the title of the page because the title can be specified directly
inside of the <head> element, by using a <title>element.
Before we can add content that a browser will display, we have to add a body to the
HTML file. Once the file has a body, many different types of content can be added
within the body, like text, images, buttons, and much more.
All of the code above demonstrates what is sometimes referred to as "boilerplate

code."
The term "boilerplate code" is used to describe the basic HTML code required to
begin creating a web page. Without all of the elements in the boilerplate code,
you'll risk starting without the minimum requirements considered to be best
practice.
Keep in mind that HTML was originally created to markup, or present, text. The first
few units of this course will focus solely on how HTML can be used to mark up text.
Later in the course, we'll dive deeper into more advanced styling techniques using
CSS.
** the rest of the code should be assumed that is part of the body section**
HEADINGS:
PARAGRAPH:
If you want to add content in paragraph format, you can add a paragraph using the
paragraph element <p>.
Unordered list for text you decide to format in bullet points:
To create a unordered list using HTML, you can use the <ul> element.
The <ul> element, however, cannot hold raw text and cannot automatically format
raw text with bullet points. Individual list items must be added to the unordered list
using the <li> element.
Ordered List:
Ordered lists are like unordered lists, except that each list item is numbered. You
can create the ordered list with the <ol> element and then add individual list items
to the list using <li>elements.
Links of text:
You can add links to a web page by adding an anchor element <a> and including
the text of the link in between the opening and closing tags.
The anchor element in the example above is incomplete without the href attribute.
Attributes provide even more information about an element's content. They live
directly inside of the opening tag of an element. Attributes are made up of the
following two parts:
1. The name of the attribute.
2. The value of the attribute.
For anchor elements, the name of the attribute is href and its value must be set to
the URL of the page you'd like the user to visit.
OPEN LINK IN NEW WINDOW:
Have you ever clicked on a link and observed the resulting web page open in a new
browser window? If so, you can thank the anchor element's target attribute.
The target attribute specifies that a link should open in a new window.
For a link to open in a new window, the targetattribute requires a value of _blank.
The target attribute can be added directly to the opening tag of the anchor
element, just like the href attribute.
All of the elements you've learned about so far (headings, paragraphs, lists, and
links) all share one thing in common: they're composed entirely of text! What if you
want to add content to your web page that isn't composed of text, like images?
IMAGES
The <img> element lets you add images to a web page. This element is special
because it does not have a closing tag, it only has an opening tag. This is because
the <img>element is a self-closing element.
Note that the <img> element has a required attribute called src, which is similar to
the href attribute in links. In this case, the value of src must be the URL of the
image. Also note that the end of the <img> element has a forward slash /. This is
required for a self-closing element.
Part of being an exceptional web developer is making your site accessible to users
of all backgrounds. Specifically, visually impaired users require more support from
your web page so that they can experience the content on your page.
HTML helps support visually impaired users with the alt attribute.
The alt attribute is applied specifically to the <img> element. The value
of alt should be a description of the image.
The alt attributes also serves the following purposes:

1. If an image fails to load on a web page, a user can mouse over the area originally
intended for the image and read a brief description of the image. This is made possible
by the description you provide in the alt attribute.
Note: If the image on the web page is not one that conveys any meaningful
information to a user (visually impaired or otherwise), the altattribute should not
be used.
Poner texto que se quiere display entre "queso con coso" ayuda a diferenciar de
atributos de elementos
LINK OF IMAGE:
Thankfully, HTML allows you to turn nearly any element into a link by wrapping
that element with an anchor element. With this technique, it's possible to turn
images into links by simply wrapping the <img> element with an <a>element.
It's important to understand that the formatting of the code in index.html will not
affect the positioning of the elements within the browser.
For example, if you wanted to increase the space between a paragraph and an
image on your web page, you would not be able to accomplish this by simply
adding more spacing between the paragraph element and image element
within index.html. This is because the browser ignores whitespace present in HTML
files like index.html.
SPACING
If you are interested in modifying the spacing in the browser, you can use
HTML's line break element: <br />.
The line break element is one self-closing tag. You can use it anywhere within your
HTML code and a line break will be shown in the browser.
Note: Line breaks are not the standard way of manipulating the positioning of
HTML elements, but it's likely that you'll come across them every now and then. In
later units, you'll learn more advanced techniques for positioning HTML elements.
Whitespace makes code easier to read by increasing (or decreasing) the spacing
between lines of code. To make the structure of code easier to read, web
developers often use indentation.
The World Wide Web Consortium (W3C) is responsible for maintaining the style
standards of HTML. At the time of writing, the W3C recommends 2 spaces of
indentation when writing HTML code. Indentation is intended for elements nested
within other elements.
In the example above, the list items are indented with two spaces. The spaces are
inserted using the spacebar on your keyboard. Unless your text editor has been
configured properly, the "TAB" key on your keyboard should not be used for
indentation.
HTML files also allow you to add comments to your code.

Comments begin with . Any characters in between will be
treated as a comment.
n the example above, a valid HTML element (an anchor element) has been
"commented out." This practice is useful when you want to experiment with new
code without having to delete old code.
Let's review what you've learned so far:

1. You can add headings of different sizes using the different headings
elements: <h1> through <h6>.
2. Paragraphs are added with the <p> element.
3. Unordered lists are created with the <ul>element and list items are added using
the <li>element.
4. Ordered lists are created with the <ol> element and list items are added using
the <li> element.
5. You can add links to your web page using the <a>element - don't forget
the href attribute!
6. Images can be added with the <img> element - don't forget the src attribute!
7. Images help support visually impaired users when <img> elements include
the alt attribute.
8. You can turn anything into a link by wrapping it with an <a> element.
9. White space in the HTML file does not affect the positioning of elements in the
browser.
10. The W3C recommends 2 spaces of indentation for nested HTML elements.
11. Comments are used to take notes inside of an HTML file. You can add a comment
with .
-_____________________
CSS
CSS, or Cascading Style Sheets, is a language that web developers use to style the
HTML content on a web page. If you're interested in modifying colors, font types,
font sizes, shadows, images, element positioning, and more, CSS is the tool for the
job!
Although CSS is a different language than HTML, it's possible to write CSS code
directly within an HTML file. This is possible because of the <style> element.
The <style> element allows you to write CSS code between its opening and
closing tags. To use the <style> element, it must be placed inside of the head.
Once <style> is placed in the web page's head, we can begin writing CSS code.
It's common for developers to add substantial amounts of custom CSS styling to a
web page. When all of that CSS code is placed within a <style> element in an
HTML file, you risk the following two things:
1. Creating a large HTML file that is difficult to read and maintain (by you and other
developers). Overall, this can result in an inefficient workflow.
2. Maintaining a clear distinction between web page structure (HTML) and web page
styling (CSS).
HTML files are meant to contain only HTML code. Similarly, CSS files are meant to
contain only CSS code. You can create a CSS file by using the .css file name
extension, like so: style.css
With a CSS file, you can write all the CSS code needed to style a page without
having to sacrifice the readability and maintainability of your HTML file.
When HTML and CSS code are in separate files, the HTML file must know exactly
where the CSS code is kept, otherwise, the styling can't be applied the web page. In
order to apply the styling to the web page, we'll have to link the HTML file and the
CSS file together.
You can use the <link> element to link the HTML and CSS files together.
The <link> element must be placed within the head of the HTML file. It is a self-
closing tag and requires the following three attributes:
1. ref - like the anchor element, the value of this attribute must be the address, or path,
to the CSS file.
2. type - this attribute describes the type of document that you are linking to (in this
case, a CSS file). The value of this attribute should be set to text/css.
3. rel - this attribute describes the relationship between the HTML file and the CSS file.
Because you are linking to a stylesheet, the value should be set to stylesheet.
Note that in the example above the path to the stylesheet is a URL:
If the CSS file is stored in the same directory as your HTML file, then you can
specify a relative path instead of a URL, like so:
To style an HTML element using CSS, you must first select that element in the CSS
file. For example, to style a <p> element, the syntax to select it using CSS is:
In the example above, all paragraph elements are selected using a CSS selector. The
selector (in this case) is p. Note that the CSS selector essentially matches the HTML
tag for that element, but without the angle brackets.
Note: The p selector in the example above will select all <p> elements on the web
page. Later in this course, you'll learn how to use more specific CSS selectors so
that you can select any element you want.
It's not enough to simply select an HTML element in a CSS file. To actually style the
element, you need to specify two things inside the body of the selector:
1. Property - the property you'd like to style of that element (i.e., size, color, etc.).
2. Value - the value of the property (i.e., 18px for size, Blue for color, etc.).
The line color: Blue; is referred to CSS declaration. A CSS declaration consists of
a property and a value. Note that a semicolon (;) ends all declarations.
Finally, the entire snippet of code in the example above is known as a CSS rule. A
CSS rule consists of the selector and all declarations inside of the selector.
Styling with CSS would be very inefficient if you were forced to manually style the
same property across many elements.
For example, what if you wanted to change the color of 10 different elements
to Aquamarine in CSS?.
Fortunately, you can select multiple elements at once so that you can save time
styling a shared property.
In the example above, the <h1> heading, the <h2>heading, and the paragraph have
all been styled to appear Green using a multiple element selector. A multiple
element selector can save you time when you want to style the same property
across many elements.
There's a special selector that can instantly select every single element on the web
page: the universal selector.
In the example above, the universal selector, *, is used to select every element on
the page and set the font to Arial.
What makes the universal selector so special? When all elements on a web page
require the same styling, it's often more efficient to set that styling using the
universal selector. Afterwards, you can modify (or remove) that styling for specific
elements that don't require it.
Just like HTML, CSS follows certain best practices for spacing and indentation.
1. One space should be used between the selector and the opening curly brace ({).
2. No extra spaces should exist between opening and closing curly braces ({ and }) and
CSS declarations (as in the example above).
3. Two spaces of indentation should be used for CSS declarations.
4. One line of spacing should exist between CSS rules. In the example above, there is
one line of spacing between the CSS rule for the heading and the CSS rule for the
paragraph.
Just like HTML, you can also leave comments in your CSS file. CSS comments begin
with /* and end with */, like so:
1. A CSS selector targets an HTML element.
2. CSS declarations style HTML elements. Declarations must contain the following
two things:
property - the property you want to style.
value - the value for the property you are styling.
3. CSS declarations must end in a semicolon (;)
4. A CSS rule consists of a CSS selector and the declarations inside of the selector.
5. Multiple element selectors can be used to style multiple elements at once.
6. Comments keep code easy to read and allow you to experiment with new code
without having to remove old code.
7. CSS follows certain best practices for spacing and indentation:

One line of spacing between a selector and the opening curly brace.
No spacing between CSS declarations and the opening and closing curly braces of the
CSS rule.
Two spaces of indentation for CSS declarations.
One line of spacing between CSS rules.
CSS: Colors
Before discussing the specifics of color, it's important to make two distinctions
about color. Color can affect the following design aspects:
1. The foreground color
2. The background color
Foreground color is the color that an element appears in. For example, when a
heading is styled to appear green, the foreground color of the heading has been
styled.
Conversely, when a heading is styled so that its background appears yellow,
the background color of the heading has been styled
In CSS, these two design aspects can be styled with the following two properties:
1. color - this property styles an element's foreground color.
2. background-color - this property styles an element's background color.
Over the past few exercises, you've seen CSS examples that use colors
like Red, Blue, or Cyan. In CSS, these colors are technically known as named colors.
There are a total of 147 named colors.
At this point, you might be wondering if you are expected to memorize the list of
147 named colors that CSS offers.
Fortunately, you don't have to! There are plenty of available resources on the
Internet that list all of the named colors in CSS, like the one we linked you to above.
If you're ever in need of a named color, a quick Google search will yield the results
you are looking for.
Although named colors provide 147 different options, this is a small amount when
you consider the flexibility of CSS. To take advantage of the full spectrum of colors
that CSS supports, you have the option of using RGB colors.
RGB (Red, Green, Blue) colors offer the option of 16,777,216 possible colors. How is
that possible?
RGB colors work by mixing together different amounts of red (R), green (G), and
blue (B). Each color (R, G, or B) can take on 1 of a possible 256 values (between 0
and 255). This results in 16,777,216 possible colors.
To use RGB colors, you can use the rgb() value when styling a color.
In the example above, the value of color is set to rgb(). The three numbers in the
parentheses represent the values for R, G, and B, in that order. Note that you can
use rgb() for background colors as well.
How can you tell what color the RGB values in the example above will result in? Are
you expected to memorize 16,777,216 possibilities? Thankfully, no!
There are many resources on the Internet known as "color pickers" that allow you to
view the result of different RGB values before you decide to use a certain color. If
you're ever in need of a color picker resource, a quick Google search will yield the
results you are looking for.
There's an additional way to specify colors in CSS: hexadecimal color codes, often
referred to as "hex color codes" for short.
Hex color codes also offer 16,777,216 color options, but they follow a different
syntax.
When specifying an RGB color mixture, the values are in base 10. Hex color codes,
however, use base 16, or hexadecimal base (hence the name), to specify color
mixtures.
When read from left to right, each group of two characters responds to a value for
red, green and blue, respectively. In the example above, 09 refers to the value for
red, AA refers to the value for green, and 34refers to the value for blue. All hex color
codes begin with a # character.
Not really. RGB values and hex color codes are different ways to represent the same
thing: color. It's possible to convert back and forth between RGB values and hex
color codes (color pickers often help with this conversion).
Note: When a hex color code is composed of entirely of the same characters, the
hex color can be abbreviated, like so:
The current revision of CSS, CSS3 (at the time of this writing), introduces a new way
to specify colors using HSL colors.
HSL stands for Hue, Saturation, and Lightness. Specifically, this is what each means:
1. Hue - the technical term that describes what we understand as "color." In HSL, hue is
represented on a color wheel. It can take on values between 0 and 360.
2. Saturation - the amount of gray in a given color. In HSL, saturation is specified using
a percentage between 0% and 100%. The percentage 0% represents a shade of gray,
whereas 100% represents full saturation.
3. Lightness - the amount of white in a given color. Similar to saturation, lightness is
specified using a percentage between 0% and 100%. The percentage 0% represents
black, whereas 100% represents white. 50% is normal.
Note: Because HSL is a part of CSS3, older browsers may not support it. In a later
exercise, you'll learn how to work around support issues for colors.
You learned that RGB and hex color codes are two different methods of
representing the same thing: color. However, there is one feature that RGB colors
support that hex color codes do not: opacity.
Opacity is a measure of how transparent a color is. To modify opacity in RGB colors,
CSS offers the rgba()value. Note the slight difference in rgb() and rgba().
The extra a character in the rgba() value is known as the alpha value. It represents
the opacity of a color. The alpha value can be a number between 0 or 1, inclusive.
In the example above, the alpha value has been set to 0.5. This indicates that the
color of the heading will be set to 50% of its normal opacity.
Note: The alpha value can also be used for HSL colors, using hsla():
RGB colors, hex color codes, and HSL colors offer web developers an extraordinary
amount of color customization options. As these properties become more
advanced, however, it's important to keep in mind that not all users browse the
Internet with the same browser, let alone the same version of a given browser.
Because of this, we must include redundant color options in our CSS code that can
cater to a wide audience of different browsers.
Specifically, we can add multiple CSS color declarations, just in case a user's
browser can't support a certain declaration.
1. Foreground color refers to the actual color of an element, styled with

the color property.
2. Background color refers to the color behind an element, styled with
the background-colorproperty.
3. There are 147 named colors available.
4. RGB and hexadecimal colors offer over 16 million color possibilities.
5. HSL is a new way of defining colors in CSS3.
6. You can modify the opacity of a color with RGBa or HSLa colors.
7.
Not all browsers support newer CSS features, like opacity or HSL, so additional
declarations should be made to support a wide audience of users.
8. There are many color picker resources available on the Internet to help you select
specific colors, as well as provide colors in different formats.
CSS: Fonts
The phrase "type of font" refers to the technical term typeface, or font family.
To change the typeface of text on your web page, you can use the font-
family property.
The font specified in a stylesheet must be installed on a user's computer in order for that font to display when
a user visit the web page. We'll learn how to work around this issue in a later exercise.
You've probably noticed that we haven't been specifying a typeface in previous exercises of this course.
How exactly does the browser know what typeface to use when displaying the web page? The default
typeface for all HTML elements is Times New Roman. You may be familiar with this typeface if you have
ever used a formatted word processor.
It's a good practice to limit the number of typefaces used on a web page to 2 or 3.
1.
When the name of a typeface consists of more than one word, it must be enclosed in
double quotes (otherwise it will not be recognized), like so:
The practice of typography has been around for centuries! Over time, typographers
have refined their craft and have developed many different typefaces, which has
allowed them, in some cases, to classify them as one of the following two
types: serif fonts and sans-serif fonts.
Serif - the letters in these fonts have extra details on the ends of each letter. Examples include fonts
like Times New Roman or Georgia, among others.
Sans-Serif - the letters in these fonts do not have extra details on the ends of each letter. Instead, letters
have straight, flat edges. Some examples include Arial or Helvetica.
Earlier, you learned that users must have the fonts specified in the stylesheet
installed on their computer in order for their browser to display that font. What
happens when a font is not installed on a user's computer?
Most computers have a small set of typefaces pre-installed. This small set includes
serif fonts and sans-serif fonts, like Times New Roman and Arial, respectively.
When the stylesheet specifies a font not installed on a user's computer, the pre-
installed fonts can be used as fallback fonts for users.
To use fallback fonts, the following syntax is required:
The CSS rule above says: "Use the Garamond font for all <h1> elements on the web
page. If that font is not available, use the Times font. If both of those fonts are not
available, use any serif font pre-installed on the user's computer." The fonts
specified after Garamond are the fallback fonts.
Link to google fonts

Fortunately, you don't have to predict which fonts are installed on a user's
computer. Many (but not all) of the new fonts that emerge on a daily basis are
being centralized in directories made available for public use.
For example, Google offers Google Fonts, a directory of thousands of open-source

fonts that are free to use by anyone.
To use these fonts, you can link to a specific Google Font in your HTML code and
use it immediately in your stylesheet. Because the HTML file links directly to the
Google Font, a user's browser can display the typeface you specify. This avoids
having to determine whether or not that font is installed on a user's computer.
To use a Google Font, you can use a <link> element, just like you did for a CSS
stylesheet:
The URL in the example above specifies the Ralewaytypeface from Google Fonts.
You can use the new font just as you would use any other font:
CSS: FONT SIZE
To change the size of text on your web page, you can use the font-size property.
In the example above, the font-size of all paragraphs was set to 18px. What exactly
does px mean?
CSS: SPACING BETWEEN TEXT
To avoid this problem, you can modify the spacing between lines of text with
the line-height property.
When the line height of an element is modified, you are manipulating

the leading (pronounced "ledding") of the font. When the line height is increased,
the spacing between lines of text increases, which can make text easier to read.
The line height can be modified using pixels or ems, but the unit of ems is
preferred, since ems offer a spacing relative to the size of the text on the page.
When the line-height property of an element is modified, the leading is increased,

resulting in an increase of the vertical spacing between lines of text.
CSS: WORD SPACING
You can also increase the spacing between words in a body of text, technically
known as word spacing.
To do so, you can use the word-spacing property:
The default amount of space between words is usually 0.25em. In the example
above, the word spacing is set to 0.3em, which represents an increase of
only .05em in word spacing.
CSS: LETTER SPACING
The technical term for adjusting the spacing between letters is called "kerning".
Kerning can be adjusted with the letter-spacing property in CSS.
CSS: FONT WEIGHT
You've probably noticed bolded text across many different web sites. It's common
to bold important headings or keywords.
In CSS, the font-weight property turns bold on or off.
The font-weight property has a second value: normal. Why does it exist?
If we wanted all text on a web page to appear bolded, we could select all text
elements and change their font weight to bold. If a certain section of text was
required to appear normal, however, we could set the font weight of that particular
element to normal, essentially "shutting off" bold for that element.
// tambin se puede poner font-weight:100;
CSS: ITALIZE WORDS

You can also italicize words with the font-styleproperty.
The italic value causes text to appear in italics. The font-style property also has
a normal value, for the same reasons discussed in the previous exercise.
CSS: UPPER/LOWER CASE
Text can also be styled to appear in either all uppercase or lowercase with
the text-transform property.
Depending on the type of content a web page displays, it may make sense to
always style a specific element in all uppercase or lowercase letters. For example, a
website that reports breaking news may decide to format all <h1> heading elements
such that they always appear in all uppercase, as in the example above. It would
also avoid uppercase text in the HTML file, which could make code difficult to read.
CSS:ALIGN TEXT
To move, or align, text, we can use the text-alignproperty.

The text-align property can be set to one of the following three values:
1. left - aligns text to the left hand side of the browser.
2. center - centers text.
3. right - aligns text to the right hand side of the browser.
CSS: SUMMARY

1. The font-family property changes the typeface of text.
2. Serif fonts have extra details on the ends of each letter. Sans-Serif fonts do not.
3. Fallback fonts are used when a certain font is not installed on a user's computer.
4. Google Fonts provides free fonts that can be used in an HTML file with the <link>
element.
5. Font size can be specified using pixels, ems, or percentages.
6. The vertical spacing between lines of text can be modified with the line-
spacing property.
7. The horizontal spacing between words can be modified with the word-
spacing property.
8.
The spacing between letters, the kernel, can be modified with the letter-
spacing property.
9. Text can appear bold with the font-weightproperty.
10. Text can appear in italics with the font-styleproperty.
11. Text can appear in all uppercase or all lowercase with the text-
transform property.
12. Text can be aligned with the text-alignproperty.
ORGANIZING HTML CODE
Writing clear, maintainable HTML code for yourself and for other developers.
Venturing into more advanced CSS styling.
In the last unit, you learned how to style color and fonts. Unfortunately, we had no
way of targeting specific HTML elements. Instead, every selector we used targeted
all elements of a certain type. By organizing HTML code with labels for elements,
you'll learn how to style specific HTML elements at-will.
With the proper labels, we can style individual HTML elements! Specifically, we can
label HTML elements with a unique identifier, or ID. We can then style that specific
element in the stylesheet.
To label an element with an ID, we can use the idattribute on an HTML element.
In the example above, the heading is labeled with an id of botswana.
What purpose do IDs serve? IDs are intended to label unique elements in an HTML
file. No two HTML elements should ever share the same ID that would defeat
the purpose of a unique identifier!
Ex:
<div id="header-text"> 
**No entiendo por qu cambio el sintax**
index.html
vs
style.css
STYLE ID: CSS

Now that you know how to label HTML elements with an ID, we can style that
specific element in the stylesheet.
To style a specific element labeled with an ID, you can use an ID selector in the
stylesheet.
In the example above, the HTML element with an ID of botswana is targeted with
the ID selector #botswana.
vs no ID
IF WANT TO ADD ID SELECTOR IN CSS STYLE SHEET ADD IT UNDER

HEADER (BUT WHY?) (WHEN TO ADD IN BODY AND WHEN TO ADD IN
HEADER?)
HTML: CLASS
In the example above, the HTML element with an ID of botswana is targeted with
the ID selector #botswana.
CSS offers a solution to this limitation. For multiple elements that should share the
same styling, classes can be used to label them.
To label an element with a class, we can use the class attribute on an HTML
element.
In the example above, there are two headings with a class of science. Why?
HTML elements are often labeled with class names that reflect the content they
represent on the web page. In the example above, perhaps a news company
decided that all news headlines about science should be labeled with a class
of science.
CSS: STYLE: CLASS

To style elements of the same class, you can use a class selector in the stylesheet.
Class selectors begin with a period (.) and are immediately followed by the name
of the class. In the example above, all elements with a class of sciencewill have their
typeface, color, and letter case modified.
As you learn more about web development, you'll notice that it's very common to
style groups of elements using classes. In fact, you're more likely to see classes
more often than you see IDs. While IDs still play a critical role when you move into
languages like JavaScript, classes are by far the most commonly used for styling
groups of elements.
CSS: Variations
The class selector targets all elements of a particular class. It's possible, however,
for multiple elements on a web page to share a specific styling, but for one of
those elements to differ slightly.
For example, a heading and a paragraph (both with a class of breaking) may need
to share the same typeface, but the paragraph may require a styling better suited
for paragraphs, as in the following example.
The example above uses a new selector: p.breaking. What's the difference
between the .breaking and p.breaking selectors?
The .breaking selector targets all elements with a class of breaking.

The p.breaking selector targets only <p> elements with a class of breaking. This
type of selector allows you to be even more specific about a particular element's
styling, even when that element must share some styling with other elements.
Unless otherwise specified, the rest of this course will use
the element.class selector syntax.
CSS does not limit you to selectors that target a single element or class.
In a previous exercise, you learned how to use a multiple element selector to style
multiple elements at once.
The same syntax can be used to style multiple classes at once.
HTML: LABLING ELEMENTS: 2 CLASSES
It's also possible to label HTML elements with more than one class. How is this
functionality useful?
You learned that elements that share a styling (e.g. typeface) are labeled with the
same class. When those same elements must also be differentiated, however,
labeling with an additional class is helpful.
In the example above, the HTML code uses main headings for two different book
titles. In this example, all book titles must share the same typeface, so the headings
are labeled with a class of book and are then styled with a typeface of Georgia.
The books, however, must be differentiated based on their country of origin. To

differentiate the book titles based on this information, two additional
classes, domestic and foreign, are applied to the respective headings, which
style the color of the heading in the CSS code.
To label an HTML element with an additional class, simply include the class within
the double quotes, immediately after the first class. HTML elements can be labeled
with many classes, but whenever possible, it's best to limit an element to four
classes at most.
ORGANIZE CLASSES + IDS
Keep HTML code easy to read.

Group elements that belong together.
HTML offers an element that is the backbone of code organization: the div,
represented by <div> in HTML.
You can think of the div as a box, or container, that groups elements that belong
together.
For example, a <div> can be used to group together all of the elements that make
up the navigation for a web page, or any other section of a page.
HTML: DIVS + CLASSES

(divs son como cajas que guardan cajas mas pequeas (clases))
Now that you know how to organize code into sections using divs, we can start
labeling divs with classes instead, rather than labeling individual elements with
classes.
This does not mean that labeling individual elements with classes is no longer
useful. Even when divs are labeled with classes, there will be many other times
when an individual element will need to be labeled with a class.
In the example above, a heading and paragraph are contained within a div that has
a class of container. In the stylesheet, the background color and typeface of the
div have been styled.
Divs are intended to contain other HTML elements, not raw text. Does it make
sense to style a div directly then?
When a div is styled, all elements inside of the div will inherit the styling applied to
the div. This example illustrates how easy it is to style sections of a web page using
div.
SUMMARY:

1. Code is a lot more readable when it is organized using IDs, classes, and divs.
2. IDs label HTML elements that are unique to the web page (an element that
appears only once).
3. Classes label elements that will share the same styling. They make styling more
efficient.
4. The <div> groups elements together. It makes the HTML file easier to read by
organizing the web page into logical sections.
5. HTML elements can be labeled with multiple classes.
6.
Divs are one of the most commonly used HTML elements. Understanding how they
are used is a critical skill for web developers.
CSS: BOX MODEL
In some of the past exercises, you've unknowingly seen aspects of the box model.
For example, when you set the background color of an element, you may have
noticed that the background color was applied not only to the area directly behind
the element, but also to the area to the right of the element. In another exercise,
you learned how to align the text. How did the browser know how to align the
text?
All HTML elements live within a box. Elements on a web page are understood by
the browser as "living" inside of a container, or a box. This is what is meant by
the box model.
When you changed the background color of an element, you changed the
background color of its entire box. When you aligned text, the text was aligned
relative to the element's entire box. To truly create custom websites, you'll have to
understand the box model.
In this unit, you'll learn about the following aspects of the box model:
1. The dimensions of an element's box
2. The borders of an element's box
3. The content within an element's box
4. The area around all four sides of an element's box
CODE TO REVEAL BOXES AROUND ELEMENTS:

An element's box has two dimensions: a height and a width. In HTML, all boxes have
default dimensions. These default dimensions are automatically set to hold the raw
contents of the box.
To modify the default dimensions an element's box in CSS, you can use
the width and height properties.
These two properties can be specified with the following units of measurement:
1. Pixels - You learned about pixels when you learned about fonts. This unit lets you set
the exact size of an element's box.
2. Ems - This unit sets the dimensions of the box relative to the size of the text within the
box.
3. Percentages - This unit sets the dimensions of the box relative to the size of the box
that it is encased in. For example, consider an element (a box) of class blue set to a
height of 200 pixels and a width of 200 pixels. Inside of blue, consider another box
of class red, set to a height of 37% and a width of 45%. The resulting dimensions of
the red box would be a height of 74 pixels and a width of 90 pixels.
Developers often use ems or percentages to set box dimensions. Because many
web pages are now accessed on mobile devices and other displays of differing
sizes, ems and percentages allow boxes to scale depending on the size of a user's
display.
CSS: RESPONSIVE WEB DESIGN
Because a web page can be viewed through displays of differing screen size, the
content on the web page can suffer from those changes in size. To avoid this
problem, CSS offers two properties that can limit how narrow or how wide an
element's box can be sized to.
1. min-width - this property ensures a minimum width for an element's box.
2. max-width - this property ensures a maximum width for an element's box.
In the example above, the width of all paragraphs will not shrink below 300 pixels,
nor will the width exceed 600 pixels.
You can also limit the minimum and maximum height of an element.
1. min-height - this property ensures a minimum height for an element's box.
2. max-height - this property ensures a maximum height for an element's box.
In the example above, the height of all paragraphs will not shrink below 150 pixels
and the height will not exceed 300 pixels.
What will happen to the contents of an element's box if the max-height property
is set too low? It's possible for the content to spill outside of the box, resulting in
content that is not legible. You'll learn how to work around this issue in the next
exercise.
When the value of the max-height property is set too low, the contents will spill
outside of the box. How can we ensure that this doesn't happen?
The overflow property controls what happens to content when it spills,

or overflows, outside of its box. It can be set to one of the following values:
1. hidden - when set to this value, any content that overflows be hidden from view.
2. scroll - when set to this value, a scrollbar will be added to the element's box so that
the rest of the content can be viewed by scrolling.
Summary
All HTML elements are contained within a box.

Boxes have two dimensions: a width and a height. These dimensions can be modified with
the width and height properties.
Width and height dimensions can be set using one of three units of measurement: pixels, ems, or
percentages.
A minimum and maximum width or height can be set for a box. This helps ensure that content remains
legible when a user shrinks or expands their browser window.
If an element's box becomes too small, the content may overflow. The overflowed content can be controlled
with the overflow property.
CSS: Box Borders
It's not possible to view a box's border if the border's style has not been set. A
border's style can be set with the border-style property. This property can take
on one of the following values:
1. solid - border is a solid line.
2. dashed - border is a series of lines or dashes.
3. dotted - border is a series of square dots.
4. double - border is two solid black lines.
5. groove - border is a groove (or carving).
6. inset - border appears to cut into the screen.
7. outset - border appears to pop out of the screen.
8. ridge - border appears as a picture frame.
9. hidden or none - no border.
You can control the thickness, or width, of borders with the border-width property.
The value of border-width is given in pixels.
t's also possible to also set the border-widthproperty to one of the following
named thicknesses:
1. thin
2. medium
3. thick
What if you don't want the border thickness to be the same on all four sides?
In that case, another version of the border-widthproperty allows you to specify the
width for each side of the border.
The values in the example above refer to the border width in clockwise order (top: 3
pixels, right: 1 pixel, bottom: 2 pixels, left: 1 pixel).
If you'd like to be even more specific about the width of different sides of the
border, you can use the following properties:
1. border-top-width
2. border-right-width
3. border-bottom-width
4. border-left-width
The color of a border can also be customized with the border-color property.
The border-color property accepts colors in the various formats you learned about
earlier: named colors, RGB(a) colors, and hex colors. It's common to use hex colors
for borders, but you'll likely also come across RGB(a) colors as well.
The shorthand way of setting border style, width, and color can be achieved with
the border property. Let's look at how we can decrease the amount of code
bloat with this property.
It's considered best practice to follow the width-style-color order when using
the border property.
The corners of an element's border box can be modified with the border-
radius property.
You can create a border that is a perfect circle by setting the radius equal to the
height of the box, or to 100%.
Summary:
Let's review what you learned:

1. You can style the borders of an element's box.
2. The border-width property allows you to set the thickness, or width, of a border.
3. The border-style property allows you to change the style of border used.
4. The border-color property allows you to change the color of a border.
5. Individually setting the style, thickness, and color of a border can bloat code. It's more
efficient to use the shorthand border property and specify all three properties at
once, in that order.
6. Box borders don't have to be square. Their corners can be rounded with the border-
radiusproperty.
CSS: CONTENT
In this lesson, you'll learn how to modify the spacing around the content inside of
the box. This concept is critical in understanding how to customize the way content
is displayed to users.
The space between the contents of a box and the borders of a box is known
as padding. In CSS, you can modify this space with the padding property.
The code in the example will put 10 pixels of space between the content of the
paragraph (the text) and the box borders, on all four sides.
The padding property is particularly useful at making text easier to read when the
text has a border around it.
Note: In the last couple of lessons, you learned how to set the width and height of
a box. When padding is set for a box (as in the example above) it will be added to
the width and height of a box, increasing the dimensions of the box. We'll learn
how to avoid this problem in the next lesson.
In that case, another version of the padding property lets you specify exactly how
much padding there should be on each side of the content.
In the example above, the four values 5px 10px 5px 10px refer to the amount of
padding in a clockwise rotation.
When you're certain that the top and bottom values for padding will equal each
other, and that the left and right values for padding will also equal each other, you
can use the following shortcut:
The first value, 5px, sets a padding value for the top and bottom sides of the
content. The second value, 10px sets a padding value the left and right sides of the
content.
If you want to be even more specific about the amount of padding on each side of
a box's content, you can use the following properties:
1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
So far, you've learned about the following aspects of the box model: dimensions,
borders, and padding. The fourth and final aspect of the box model is margin.
MARGIN
The margin refers to the space directly outside of the box. You can adjust this
spacing with the marginproperty.
The code in the example above will place 20 pixels of space on the outside of the
paragraph's box, on all four sides. This means that other HTML elements on the
page cannot come within 20 pixels of the paragraph.
ust like padding, what if you don't want equal margin on all four sides of the box?
In that case, another version of the margin property lets you specify exactly how
much margin there should be on each side of the box.
Just like the padding shortcut, when you're certain that the top and bottom values
for margin will equal each other, and that the left and right values for padding will
also equal each other, you can use the following shortcut:
f you want to be even more specific about the amount of margin on each side of a
box, you can use the following properties:
1. margin-top
2. margin-right
3. margin-bottom
4. margin-left
The margin property also lets you center content, if you follow certain requirements.
Take a look at the following example.
When the margin property is set to auto, the element being styled will center in
the page.
In theory, the div in the example above should center on the page, but it doesn't.
Why?
In order to center an element, a width must be set for that element. Otherwise, the
width of the div will be automatically set to the full width of its containing element,
like the <body>, for example. It's not possible, therefore, to center an element that
takes up the full width of the page.
In the example above, the width of the div is set to 400 pixels, which is less than the
width of the page's body. This will cause the div to center properly on the page.
Note: When margin: auto is used, an element will center relative to its container.
For example, the div in the example above was centered relative to the width of the
body. If the div was contained in larger div, the smaller div would center relative to
the width of the larger div. This is important to keep in mind when attempting to
center nested elements, like divs.
CSS: DEFAULT STYLE SHEETS
All major web browsers have a default stylesheet they use in the absence of an
external stylesheet. These default stylesheets are known as user agent stylesheets. In
this case, the term "user agent" is a technical term for the browser.
User agent stylesheets often have default CSS rules that set default values for
padding and margin. This affects how the browser displays HTML elements, which
can make it difficult for a developer to design or style a web page.
Many developers choose to reset these default values so that they can truly work
with a clean slate.
The code in the example above resets the default margin and padding values of all
HTML elements. It is often the first CSS rule in an external stylesheet.
Note that both properties are both set to 0. When these properties are set to 0,
they do not require a unit of measurement.
CSS: ELEMENTS:
All HTML elements can be classified as one of the following: inline elements
or block-level elements.
1. Inline elements - elements that display inline with text, without disrupting the flow of
the text (like links).
2. Block-level elements - elements that use an entire line of space in a web page and
disrupt the natural flow of text. Most of the common HTML elements are block-level
elements (headings, paragraphs, divs, and more).
In CSS, you can change the default behavior of elements with the display property. Why is this
useful?
Modifying the display property of an element can help achieve a desired layout
for a web page. The display property can take on one of four values:
1. inline - causes block-level elements (like a div) to behave like an inline element
(like a link).
2. block - causes inline elements (like a link) to behave like a block element (like a
div).
3. inline-block - causes block-level elements to behave like an inline element, but
retain the features of a block-level element.
4. none - removes an element from view. The rest of the web page will act as if the
element does not exist.
CSS: HIDE ELEMENTS
It's common to use the display property to create a navigation bar from list
items, like so:
Elements can be hidden from view with the visibility property.
The visibility property can be set to one of the following values:

1. hidden - hides an element.
2. visible - displays an element.
In the example above, the list item with a class of future will be hidden from view
in the browser.
Keep in mind, however, that users can still view the contents of the list item
(e.g., Donate) by viewing the source code in their browser. Furthermore, the web
page will only hide the contents of the element. It will still leave an empty space
where the element is intended to display.
Note: What's the difference between display: none and visibility: hidden? An
element with display: none will be completely removed from the web page. An
element with visibility: hidden, however, will not be visible on the web page, but
the space reserved for it will.
Summary:
Padding is the spacing between a box's content and the borders of the box.
Padding can be set equally on all sides of the content, or can be set specifically for certain sides of the
content only.
Margin is the spacing directly outside of a box's borders.
Margins can be set equally on all sides of a box, or can be set specifically for certain sides of the box only.
The display changes the default behavior of HTML elements.
The visibility property hides an element, but does not remove the amount of
space the element takes up on the page. If you want to hide that element and remove
the empty space, use the display property instead.
CSS: CHANGING THE BOX MODEL

The last three lessons focused on the most important aspects of the box model:
box dimensions, borders, padding, and margin.
The box model, however, has an awkward limitation regarding box dimensions. This
limitation is best illustrated with an example.
In the example above, a heading element's box has solid, black, 1 pixel thick borders. The
height of the box is 200 pixels, while the width of the box is 300 pixels. A padding of 10
pixels has also been set on all four sides of the box's content.
Unfortunately, under the current box model, the border thickness and the padding will
affect the dimensions of the box.
The 10 pixels of padding increases the height of the box to 220 pixels the width to 320
pixels. Next, the 1 pixel thick border increases the height to 221 pixels and the width to 321
pixels.
Under this box model, the border thickness and padding are added to the overall
dimensions of the box. This makes it difficult to accurately size a box. Over time, this can
also make all of a web page's content difficult to position and manage.
Many properties in CSS have a default value and don't have to be explicitly set in
the stylesheet.
For example, the default font-weight of text is normal, but this property-value
pair is not typically specified in a stylesheet.
The same can be said about the box model that browsers assume. In CSS, the box-
sizing property controls the type of box model the browser should use when
interpreting a web page.
The default value of this property is content-box. This is the same box model that
is affected by border thickness and padding.
Study the diagram to the right. It illustrates the default box model used by the
browser, content-box.
Fortunately, we can reset the entire box model and specify a new one: border-box.
The code in the example above resets the box model to border-box for all HTML
elements. This new box model avoids the dimensional issues that exist in the
former box model you learned about.
In this box model, the height and width of the box will remain fixed. The border
thickness and padding will be included inside of the box, which means the overall
dimensions of the box do not change.
In the example above, the height of the box would remain at 200 pixels and the
width would remain at 300 pixels. The border thickness and padding would remain
entirely inside of the box.
Now that you know about the new box model, let's actually implement it in the
browser.
Summary:
In the default box model, box dimensions are affected by border thickness and padding.
The box-sizing property controls the box model used by the browser.
The default value of the box-sizing property is content-box.
The value for the new box model is border-box.
The border-box model is not affected by border thickness or padding.
CSS: PAGE LAYOUT

The box model is the first step in understanding how the browser lays out HTML
elements. Visually appealing websites, however, are often the result of well
positioned elements.
In this unit, you'll learn how to position HTML elements in order to gain more
control of a web page's layout.
The default position of an element can be changed by setting

its position property. The positionproperty can take one of four values:
1. static - the default value (it does not need to be specified)
2. relative
3. absolute
4. fixed
One way to modify the default position of an element is by setting

its position property to relative.
This value allows you to position an element relative to its default position the web
page.
In the example above, the div has been positioned using two of the four offset
properties. The valid offset properties are:
1. top - moves the element down.
2. bottom - moves the element up.
3. left - moves the element right.
4. right - moves the element left.
In the example above, the div will be moved down 50 pixels and to the right 75
pixels. Units for offset properties can be specified pixels, ems, or percentages. Note
that offset properties will not work if the position of the element is not set
to relative.
Another way of modifying the position of an element is by setting its position

to absolute.
When an element's position is set to absolute, all other elements on the page
will ignore the element and act like it is not present on the page.
Unlike the relative value, the code in the example is valid. The div will be pinned
down to its current position. Unfortunately, if offset properties aren't specified, it's
possible for the div's content to overlap with other content on the page, especially
since other elements with ignore the div.
Offset properties can be set in order to avoid this problem. The specific offset
values will depend on what makes the best sense for the content of a web page.
When an element's position is set to absolute, as in the last exercise, that element
can still scroll out of view when a user scrolls.
We can fix an element to a specific position on the page (regardless of user

scrolling) by setting its position to fixed.
In the example above, the div will remain fixed to its position no matter where the
user scrolls on the page. This technique is used often for navigation bars on a web
page.
It's still possible, however, for content (like text) to overlap other content when
using this position. One solution is to set an opaque background color for the
element.
The opaque background color will prevent any other content on the page from
overlapping with any content inside of the div.
When boxes on a web page have a combination of different positions, the boxes
(and therefore, their content) can overlap with each other, making the content
difficult to read or consume.
In the example above, the description div would ignore the navigation div
and overlap it as a user scrolls. The opaque background color of
the navigation div is not enough to prevent this from happening.
The z-index property controls how far "back" or how far "forward" an element
should appear on the web page.
The z-index property accepts integer values. Depending on their values, the
integers instruct the browser on the order in which elements should be displayed
on the web page.
In the example above, the z-index of the navigationdiv has been set to 1, which
instructs the browser to move this div forward and stack it "on top" of the other
elements when the user scrolls.
It's not necessary to set the z-index of the description div to 0 or anything lower
than 0. Setting the z-index of navigation to a number greater than 0 is sufficient to
prevent overlapping content.
So far, you've learned how to specify the exact position of an element using offset
properties. If you're simply interested in moving an element as far left or as far
right as possible on the page, you can use the floatproperty.
The float property can be set to one of two values:

1. left - this value will move, or float, elements as far left as possible.
2. right - this value will move elements as far right as possible.
When an element is floated, any other content within the same containing element
will naturally flow around the element.
Floated elements must have a width specified, as in the example above. Otherwise,
the element will assume the full width of its containing element, and attempting to
float the element may not yield any visible results.
The float property can also be used to float multiple elements at once. When
multiple floated elements have different heights, however, this can affect their
layout on the page. Specifically, elements can "bump" into each other and not
allow other elements to properly move the left or or the right.
The clear property specifies how elements should behave when they bump into
each other on the page. It can take on one of the following values:
1.
left the left side of the element will not touch any other element within the same
containing element.
2. right the right side of the element will not touch any other element within the
same containing element.
3. both neither side of the element will touch any other element within the same
containing element.
4. none the element can touch either side.
In the example above, all divs on the page are floated to the left side. The div with
class special did not move all the way to the left because a taller div blocked its
positioning. By setting its clear property to left, the special div will be moved all
the way to the left side of the page.
Summary
The position property allows you to specify the position of an element in three different ways.
When set to relative, an element's position is relative to its default position on the page.
When set to absolute, an element's position can be pinned to any part of the web page, but the element
will still move out of view the page is scrolled.
When set to fixed, an element's position can be pinned to any part of the web page. The element will
remain in view no matter what.
The z-index of an element specifies how far back or how far forward an element appears should appear
on the page.

The float property can move elements as far left or as far right as possible on a
web page.
You can clear an element's left or right side (or both) using the clear property.
CSS: ADDING IMAGES
In the very beginning of the course, we taught you how to add images to your web
page using the <img>element. While this technique is still valid, it's possible to also
add images (and style them) to a website and style them using CSS techniques. The
aim of this unit will be to teach you how to add images to your web page by using
a variety of techniques.
As with any other element, the dimensions of an image can be set with
the height and width properties.
Specifying the dimensions of an image helps the browser determine how much
space should be reserved for the image.
Note: Images should be saved at the dimensions they will be displayed in on the
web page. Using dimensions for an image that exceed the original dimensions will
distort the image.
Note: .product img refers to all images within elements that have a class name
of product.
Images can also be centered, but first, their default behavior must be changed. By
default, images are inline elements. For images to center properly, they must
behave as block-level elements.
In the example above, the image's display property has been set to block. Now the
image can be aligned as a block-level element.
In the example above, the image is aligned using the margin property. The top
and bottom margins of the image's box are set to 0 margin. The left and right
margins are set to auto, which automatically sets the exact amount of margin
needed on the left and right sides in order to center the image.
Note: To align images to the left or right side of a page, you can use
the float property you learned about earlier.
Images can also be added to the backgrounds of HTML elements with

the background-image property.
The background-image can be set to a value of url().
1. url() - contains the URL of the image, enclosed in double quotes.
In the example above, the background of the body will be set to the image
specified in double quotes. This technique can be used on nearly any HTML
element.
In the last exercise, you probably noticed that the background image was repeated,
creating a tiled background (this is the default behavior).
You can control how a background image repeats with the background-
repeat property. This property can take one of four values:
1. repeat - the default value the image will repeat horizontally and vertically.
2. repeat-x - the background image will be repeated only along the x-axis
(horizontally).
3. repeat-y - the background image will be repeated only along the y-axis (vertically).
4. no-repeat - the background image will not be repeated at all and will appear only
once.
In the example above, the paragraph's background image will repeat horizontally.
When a background image is not repeated, its position can be modified with
the background-positionproperty.
A background image is positioned using a 3 by 3 grid (three rows, three columns),

meaning there are 9 total possible positions for the image:
1. left top - top left corner of the element's box.
2. center top - top center of the element's box.
3. right top - top right corner of the element's box.
4. left center - left column, center row.
5. center center - the center of the element's box.
6.
right center - right column, center row.
7. left bottom - bottom left corner of the element's box.
8. center bottom - bottom center of the element's box.
9. right bottom - bottom right corner of the element's box.
Note that the values are in pairs.
In the example above, the background image is not repeated. It's positioned in the
top right corner of the element's box.
Note: When setting this property, if only one value is specified, the second value
will default to center.
In the last few exercises, you learned how to set a background image, its repetition
pattern, and its position using three different properties. CSS allows you to set all
three properties at once using a shorthand property: background.
Previously, we set these three properties as follows:
The code in the example above can be shortened using the background property.
Note that the background property includes all of the properties that we previously
styled individually: background image, repetition, and position (in that order). It's
considered best practice to follow this order of values when setting the background
property.
To modify a background image's size, you can use the background-size property.
This exercise will focus on two of the most common values of the background-
size property:
cover - expands the image as large as possible to cover the full width or height of a container. If the
dimensions of the container (say, a div) are larger than the dimensions of the image, the image will become
distorted. This value is best for images that don't communicate important content to the user, like background
images.
contain - expands the image as large as possible, but the image will be letterboxed, which means it won't
cover the full width or height of a container.
In the example above, the background image will expand to cover the full size of
the div.
With the background-attachment property, you can specify whether or not a
background image should remain at one position on the web page or whether it
should move up and down as the user scrolls through a web page.
The background-attachment property can take one of two values:

1. scroll - this value allows the image to move up and down as a user scrolls on the
web page (this is the default value).
2. fixed - this value pins the image's position on the page.
In the example above, the background image will remained fixed as a user scrolls
through the web page.
A wide variety of different background styles are used across many modern
websites today. Some sites use large images in their layout, while others use
creative color gradients as their background.
The background-image property you learned about earlier allows you to do more
than simply set the background image of an element. It also lets you use color
gradients in your web page.
Gradients are planned to be a part of the newest revision of CSS, CSS3. Due to the
many browsers available, there is no standard way of defining a gradient using CSS
(different browsers require different syntax). In this exercise, we'll look at one value
supported on a couple of major browsers.
The background-image property can be set to the following value:
-webkit-linear-gradient() - this value accepts two arguments: the two colors the
linear gradient will transition to and from. The colors are usually specified as hex
color codes.
You've learned how to add images to a web page using the <img> element and
the background property. What's the difference between these two methods?
When should one method be used over another?
The method used depends on the type of image.
Some images are part of the content of a web page (icons, logos, album photos,
etc.) and they communicate important information to a user. Other images are
intended simply to style a web page (header backgrounds, etc.), not to
communicate important information.
When an image communicates important information, you can use

the <img> element and style the image using CSS, if needed.
When an image is intended to style a web page, you can use

the background property and further style it with CSS.
Summary
Image dimensions are set using the width and height properties.
A background image can be added to any element using the background-image property.
A background image's repetition is controlled with the background-repeat property.
The position of a non-repeating image can be controlled using the background-positionproperty.
The background property is a shorthand way of setting an image, repetition, and it's position.
The background-image also supports color gradients.
HTML: TABLES
There are many websites on the Internet that display information like stock prices,
sports scores, invoice data, and more. This data is naturally tabular in nature,
meaning that a table is often the best way of presenting the days.
Before displaying data, you must first create the table that will contain the data by
using the <table>element.
The <table> element will contain all of the tabular data you plan on displaying.
In many programs that use tables, the table is already predefined for you, meaning
that it contains the rows, columns, and cells that will hold data. In HTML, all of these
components must be created.
The first step in entering data into the table is to add rows using the table
row element: <tr>.
In the example above, two rows have been added to the table.
Rows aren't sufficient to add data to a table. Each cell element must also be
defined. In HTML, you can add data using the table data element: <td>.
In the example above, two data points (73 and 81) were entered in the one row
that exists. By adding two data points, we created two cells of data.
If the table were displayed in the browser, it would show a table with one row and
two columns.
Table data doesn't make much sense without titles to describe what the data
represents.
To add titles to rows and columns, you can use the table heading element: <th>.
The table heading element is used just like a table data element, except with a
relevant title. Just like table data, a table heading must be placed within a table
row.
What happened in the code above?
First, a new row was added to hold the three headings: a blank heading,
a Saturday heading, and a Sunday heading. The blank heading creates the extra
table cell necessary to align the table headings correctly over the data they
correspond to.
In the second row, one table heading was added as a row title: Temperature.
Note, also, the use of the scope attribute, which can take one of two values:
row - this value makes it clear that the heading is for a row.
col - this value makes it clear that the heading is for a column.
So far, the tables you've created have been a little difficult to read because they
have no borders.
In older versions of HTML, a border could be added to a table using
the border attribute and setting it equal to an integer. This integer would
represent the thickness of the border.
The code in the example above is following is deprecated, so please don't use it. It's
meant to illustrate older conventions you may come across when reading other
developers' code.
The browser will likely still interpret your code correct if you use
the border attribute, but that doesn't mean the attribute should be used. Instead,
you can achieve the same effect using CSS.
The code in the example above uses CSS instead of HTML to show table borders.
What if the table contains data that spans multiple columns?
For example, a personal calendar could have events that span across multiple
hours, or even multiple days.
Data can span columns using the colspan attribute. The attributes accepts an
integer (greater than or equal to 1) to denote the number of columns it spans
across.
In the example above, the data Out of Town spans the Monday and Tuesday table
headings using the value 2 (two columns). The data Back in Townappear only under
the Wednesday heading.
Data can also span multiple rows using the rowspanattribute.
The rowspan attribute is used for data that spans multiple rows (perhaps an event
goes on for multiple hours on a certain day). It accepts an integer (greater than or
equal to 1) to denote the number of rows it spans across.
In the example above, there are four rows:
1. The first row contains an empty cell and the two column headings.
2. The second row contains the Morning row heading, along with Work, which spans
two rows under the Saturday column. The "Relax" entry spans three rows under
the Sunday column.
3. The third row only contains the Afternoon row heading.
4. The fourth row only contains the Dinner entry, since "Relax" spans into the cell next
to it.
Over time, a table can grow to contain a lot of data and become very long. When
this happens, the table can be sectioned off so that it is easier to manage.
Long tables can be sectioned off using the table body element: <tbody>.
The <tbody> element should contain the all of the table's data, excluding the table
headings (more on this in a later exercise).
In the example above, all of the table data is contained within a table body element. Note,
however, that the headings were also kept in the table's body we'll change this in the
next exercise.
In the last exercise, the table's headings were kept inside of the table's body. When
a table's body is sectioned off, however, it also makes sense to section off the
table's headings using the <thead> element.
In the example above, the only new element is <thead>. The table headings are
contained inside of this element. Note that the table's head still requires a row in
order to contain the table headings.
The bottom part of a long table can also be sectioned off using
the <tfoot> element.
In the example above, the footer contains the totals of the data in the table.
Footers are often used to contain sums, differences, and other data results.
CSS:TABLES
Tables, by default, are very bland. They have no borders, the font color is black, and
the typeface is the same type used for other HTML elements.
You can use CSS to style tables just like you have done in the past. Specifically, you
can change style the various aspects mentioned above.
The code in the example above demonstrates just some of the various table
aspects you can style using the CSS properties you learned about earlier.
Summary
1. The <table> element creates a table.

2. The <tr> element adds rows to a table.
3. To add data to a row, you can use the <td>element.
4. Table headings clarify the meaning of data. Headings are added with
the <th> element.
5. Table data can span columns using the colspanattribute.,
6. Table data can span rows using the rowspanattribute.
7.
Tables can be split into three main sections: a head, a body, and a footer.
8. A table's head is created with the <thead>element.
9. A table's body is created with the <tbody>element.
10. A table's footer is created with the <tfoot>element.
11. All the CSS properties you learned about in this course can be applied to tables and
their data.
MAKE A WEBSITE COURSE:
An individual page of a website is referred to as a webpage. Notice the webpage in

the web browser. During this lesson, we will explore the HTML elements used to
build it. Click Next to learn about the anatomy of an HTML element.
HTML:
PROBLEMA CON ANCHOR!:
The diagram to the right illustrates the different parts of the anchor element syntax.
In the diagram, notice the following:
1. Any valid URL can be used for the value of the href attribute.
2. The URL must be enclosed with quotation marks.
3. Text between the <a> and </a> tags can be as few or as many words as you would
like.
IMAGE:
Just like websites have URLs, images on the web also have URLs. Image URLs
typically end with the .jpg or .png file extension. The src attribute sets
the source for an image element.
Image elements are self-closing, which means they do not need a closing tag.
HTML: VIDEO
The HTML video element can add video to a webpage.

The video element uses a number of attributes. Let's take a look at them:
1. width and height: Set the size of the screen that displays the video.
2. controls: Adds play, pause and volume control.
3. source src: Sets the URL of the video to play.
4. type: Specifies different video formats.
organized Lists:
HTML: METADATA
The last HTML elements we will explore are involved in metadata processes. You can
think of these elements as the "brains" of a webpage because they communicate
vital information to the web browser, but are not visible to a webpage visitor.
1. <!DOCTYPE html>: Tells the web browser to expect an HTML document.
2. <html>...</html>: The root of the HTML document and parent of all other
HTML elements on the webpage.
3.
<head>...</head>: Enclose other metadata about the site, such as its title.
4. <title>...</title>: Contains the site's title, which is one way users can find
your site through a search engine, like Google.
5. <meta charset="utf-8"/>: Tells the web browser which character set to use.
In this case, the character set is "utf-8".
SUMMARY:
LANGUAGES
html: stands for hypertext markup language, and is used to give a webpage structure.
css: stands for cascading style sheets, and is used to style HTML elements.
HTML ELEMENTS
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 self-closing 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/great-clip.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:
<ul> <li>...</li> <li>...</li> <li>...</li> </ul>
CSS: BASICS
The HTML link element links a CSS file to an HTML file so that CSS styling can be
applied. Here's an example of the link element:
<link rel="stylesheet" type="text/css" href="main.css"/>
About link:
The link element uses three attributes:
-rel: Specifies the relationship between the current file and the file being linked to: in this case,
the rel attribute is "stylesheet".
-type: Specifies the type of file linked to.

-href: Provides the URL of the file being linked to.
Like the HTML image element, link is self-closing. It does not need a closing tag.
1.
In the example above, main.css is an external style sheet. Using external stylesheets
is one of the most popular ways to write CSS. Inline CSS is another method.
The diagram to the right shows the anatomy of a CSS rule:

1. rule: a list of CSS instructions for how to style a specific HTML element or group of
HTML elements.
2. selector: specifies exactly which HTML elements to style. Here h1 is the selector.
3. properties and values: located inside the { }brackets, properties and values specify
what aspect of the selector to style. In the diagram's example, the color property is
set to red, which will display all h1 elements in red.
Up to this point, we've used CSS to select an HTML element by its tag name only.
However, we can use class selectors to target classes of HTML elements.
Consider the HTML below:
<div class="header"> <h2>Heading</h2> <p>Paragraph</p> </div>
Here, the div is the parent element and the h2 and p are children. CSS styles
applied to the headerclass selector will automatically apply to the h2 and the p.
Here's a refresher on parent and child elements.
In CSS, class selectors can be identified by a dot .followed by the class name, as
seen below:
.header { color: #ffffff; }

As a result of this code, child elements of divs with the header class will have a
font color of #ffffff(white).
Below, we will use a CSS class selector to style more than one HTML element at
once.
A previous exercise introduced CSS class selectors to style HTML elements of

specific classes. What if a webpage design calls for an individual page element to
be styled uniquely, but all other elements of that kind to be styled a different way?
For example, to style one anchor element differently than all the others on a
webpage, you could use the HTML id attribute:
<a id="learn-code" href="https://www.codecademy.com">Click here to learn to code!</a>
Then in the CSS file, you would create a rule for the id selector, using a # symbol:
#learn-code { color: #2e69a3; }
About using id:

1. An id attribute can only be used once because the id is unique to the element it is
assigned to.
2. Ids have greater specificity than classes. If an HTML element is using both id and
class attributes, the CSS rule for the id will take precedence over that of the class.
Below we will use an id selector to style a single HTML element differently than
others of that kind on the webpage.
CSS: Boundaries & SPACE
Observe the CSS box model diagram to the right:

1. content: Includes text, images, or other media contained within an HTML element.
2. padding: The space between the content and the border. You can think of this like
inner space.
3. border: The outline of an HTML page element. You can think of it like a picture
frame that contains the element.
4. margin: The space between the HTML page element and the next nearest element(s).
Using borders, padding, and margins allows us to control boundaries and space for
individual HTML elements.
But what CSS properties are available to move elements around on the page and
create unique page layouts? The CSS display and position properties help
accomplish this.
DISPLAY
Not all HTML elements are displayed on a page in the same way. Display
types determine how HTML elements will be arranged in relation to each other.
The diagram to the right illustrates the block and inline display types.
In the diagram, notice:

1. The two dotted rectangles represent webpages.
2. HTML heading, paragraph, and unordered list elements are block level: each appears
on its own line on the webpage.
3. HTML image and anchor elements are displayed inline: they appear on the same line
as their neighboring elements on the webpage.
Familiarize yourself with block and inline display types, then click Next to continue.
Display types can be overwritten in CSS by using the display property.
For example, we can make list items appear on the same line by setting display
to inline:
On the Tundra Gallery homepage, notice the navigation bar (navbar) on the
bottom left.
In index.html, this is represented by a navelement containing a ul with three list

items. Read through the HTML and locate this code.
In main.css locate the nav li selector. Give it a display property of inline.
Click Run and notice the change in the web browser. List items, which are normally
displayed as block-level elements, display inline within the navigation.
Nice work! The navbar is starting to come together nicely. It would be even better if
we could get the Contact button to fill in the empty corner on the bottom right.
To achieve this, we can use the CSS float property. By using float, we have the
option of floating elements left or right.
Consider the example code below. The class selector, .logo, floats left, and the
id selector #search-bar floats right:
In main.css, locate the class selector .contact-btn and assign it float: right;.
In the web browser, the gallery images that were arranged neatly in rows are now
stacked on the left side of the webpage.
The CSS display value that arranged the images, flex, has been removed. In addition
to other capabilities, flex can be used to easily align multiple page elements
horizontally.
In the example code below, there is a div with class parent:
<div class="parent"> ... </div>

To make children of the div align horizontally on the webpage, in CSS we can use:
.parent { display: flex; }
Children elements of the div with class parent will now align horizontally. We can
make sure no child element moves off the page by using flex-wrap: wrap;:
.parent { display: flex; flex-wrap: wrap; }
Finally, to center rows of children elements, we can use justify-content:
center;:
.parent { display: flex; flex-wrap: wrap; justify-content: center; }
CSS: POSITION
The CSS position property enables you to position HTML elements in exact locations
on a webpage. One useful value for this property is relative. This value positions
page elements on a webpage relative to where they would normally appear.
By first setting position: relative;, you can then use the CSS
properties top, left, bottom, and right to shift an element away from where it
would have normally appeared on the page.
The code snippet below moves a div with the class container 10px away from
the up and 20px away from the left side of the page.
.container { position: relative; top: 10px; left: 20px; }
Ever click a button on a webpage that seemed to move down and then back up like
a real-life button? We can implement this trick using the position property.
In main.css, locate .contact-btn a, which is the selector for anchor elements

that have a parent with the "contact-btn" class.
Beneath the properties already listed for the .contact-btn a selector, add:
.contact-btn a { position: relative; }
Next, locate the .contact-btn a:activeselector. :active is a psuedo-class

selector, which we use to style an element only while it's being clicked.
Add the following CSS to the .contact-btn a:active selector:
top: 2px;
This will cause the Contact button to move down slightly while being clicked,
simulating a real-life button being pushed.
Summary:
WEB CONCEPTS
CSS Box Model: illustrates the space and boundary properties of an HTML element
that can be controlled using CSS.
CSS SKILLS
border: sets the outline of an HTML page element, like a picture frame that contains
the element.
padding: sets the amount of space between an element's content and its border.

margin: sets the amount of space between an HTML element and the next nearest
element(s).
display: property that determines how the selected element will be arranged in
relation to other HTML elements on the page.
inline: display value used to arrange HTML elements on the same line as
neighboring elements.

flex: display value that allows us to easily align multiple page elements vertically or
horizontally.
float: property used to float HTML elements left or right of neighboring elements.
position: property used to position HTML elements in exact locations on a

webpage.
BUILDING WITH BOOTSTRAP
Bootstrap is a popular CSS framework with prewritten CSS rules designed to help
you build webpages faster.
Take a look at the web browser. In this lesson, we will build this webpage up from
scratch using a combination of Bootstrap and custom CSS.
Also in this lesson, we will encounter three new HTML elements:

1. header: Used to organize headers on a webpage.
2. footer: Used to organize footers on a webpage.

3. section: Defines sections on a webpage.
Before Bootstrap can work for us, we need to link to it.
In earlier lessons, we linked only to main.css. Now, in addition to main.css, we will

link to a URL that hosts Bootstrap.
The HTML link element makes Bootstrap available to us. Remember that the link
element is typically contained within HTML head tags.
<head> ... <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> ... </head>
One of the reasons Bootstrap and frameworks like it are so popular is because they
offer grids. A grid makes it possible to organize HTML elements using
preconfigured columns. Using a grid, you can customize responsive page layouts
quickly and reliably.
The Bootstrap grid contains 12 equal-sized columns, as seen in the diagram on the
right. HTML elements are arranged to span different numbers of columns in order
to create custom page layouts.
In the diagram, observe the following:
1. Bootstrap's grid columns are represented by 12 vertical bars. The boxes represent
HTML elements.
2. The words "container", "jumbotron", "col-sm-6" and "col-sm-3" refer to Bootstrap

classes.
3. The element with class "jumbotron" spans the entire width of the webpage, beyond the
borders of the grid.
4. Elements inside the second "container", such as "col-sm-6" and "col-sm-3" are
contained within the grid columns.
5. Elements labeled "col-sm-3" take up three grid columns; elements labeled "col-sm-
6" take up six grid columns.
BOOTSTRAP HEADER
Let's use Bootstrap's grid to create a simple header with navbar.
In the example code below, an HTML header element with Bootstrap's

predefined container class is used:
<header class="container"> ... </header>
Inside the header, a row is created by using a div with Bootstrap's row class:
<header class="container"> <div class="row"> </div> </header>
Finally, the row is cut into two parts:
The first part consists of the h1 with Bootstrap's class col-sm-4. It will take up the
first four columns on the grid. The second part consists of the nav element with
class col-sm-8. It will take up the remaining eight grid columns. text-
right indicates that text will be arranged on the right side of the nav.
CODE TO DO NAV MENU

In addition to a header/navigation, many websites have a large showcase area
featuring important content. Bootstrap refers to this as a jumbotron. Below is an
example implementation of a jumbotron.
First, a new section element is created and assigned the jumbotron class:
Next a div with the Bootstrap class container is used:
A div with the Bootstrap class row text-center can center subsequent child
elements which will contain text:
The ... is a placeholder for HTML elements containing text, such as h2, p or anchor
elements.
//todo inside header en html
Finally, add heading and anchor elements to the row.
The anchor element will have Bootstrap's btn btn-primary class, which will
transform it into a button.
BOOTSTRAP: CONTENT AREA

Many websites have a supporting content area. Supporting content can be
arranged using Bootstrap's grid. Below is an example implementation of a
supporting content area.
First, an HTML section element with the containerclass is used:
Next, div elements with the row class are added:
Finally, the rows are divided by using divs with Bootstrap's col-sm-... class.
Above, two rows are divided into two equal parts. Each part takes up 6 of
bootstrap's 12 columns. Using the col-sm-6 class ensures that this layout will
appear when the user's screen is the width of a tablet device(768 pixels). On
narrower screens, such as an iPhone, only one image per row will appear.
BOOTSTRAP: FOOTER
Footers display copyright information, social media links and sometimes site
navigation.
Below is one possible implementation for a footer section using Bootstrap:
First, a footer element with Bootstrap's containerclass is used:

Inside the footer, a div with Bootstrap's row class is added to hold footer content:
Finally, the row is divided into parts using Bootstrap's grid. Here is one suggestion:
Above, the row is broken into three parts: a p element that takes up four columns,
a ul which takes up 8 columns, and li items which take up 1 column each.
The lis could hold navigation menu items or social media icons.
Again, because the col-sm-... class is used, this layout will appear on tablet-
width screens and wider. Screen sizes smaller than tablet-width (768 pixels), will not
maintain this layout.
BOOTSTRAP SUMMARY
WEB CONCEPTS
CSS Framework: Set of prewritten CSS rules designed to help you build webpages
faster.
Bootstrap Grid: 12 equal-sized columns which can be utilized via Bootstrap classes to
build responsive page layouts quickly and reliably.
BOOTSTRAP CLASSES
row: Arranges HTML elements in rows, and can be useful when building
headers/navigation menus, main feature sections, supporting content sections and
footers.
jumbotron: Used to create large showcase sections featuring important content.
col-sm-*: Used to span a specified number of columns on the Bootstrap grid. The "sm"
is short for "small", and maintains desired CSS layouts on small screens (tablet-sized).
text-right: Bootstrap class used to orient text to the right side of the webpage.
btn btn-primary: Bootstrap class used to style page elements as buttons.
NOTES:
Bootstrap is a framework
Bootstrap + code pen
https://www.youtube.com/watch?v=hiCK6-8XfiA
Code pen: an online front-end code editor
Bootstrap is a free and open-source front-end web framework for designing websites and
web applications.
Javascript is a programming language whereas jQuery is a framework to help make

writing in javascript easier.
HTML: structure/skeleton
CSS: styling
JAVASCRIPT: interaction
CODEPEN SHORTCUTS
https://www.youtube.com/watch?v=pd1NX--k29c
for CSS instead of writing full code
ex width: 200px;
do w200 + (tab)
(it does it for you)
List of shortcuts:
https://docs.emmet.io/cheat-sheet/
//no shortcuts for javascript in codepen

WHAT I KNOW: GENERAL
Visual Studio (is a IDE)

Vs codepen (code editor)
IDE (Integrated Developer Environment) An integrated development environment (IDE) is a programming

environment that has been packaged as an application program, typically consisting of a code editor, a
compiler, a debugger, and a graphical user interface (GUI) builder.
http://brackets.io/
// it is like codepen
//conclusion: for front-end I need a good text editor not a IDE
Processing is an open source computer programming language and integrated development

environment (IDE) built for the electronic arts, new media art, and visual design communities
with the purpose of teaching the fundamentals of computer programming in a visual context,
and to serve as the foundation for electronic sketchbooks.
For professionals Processing is a Java framework providing support for a wide range of
creative code activities, from interactive tools to data visualization or sensor-driven
applications.
https://processing.org
BOOTSTRAP
Bootstrap is a code front-end framework for html/css/javascript
https://www.youtube.com/watch?v=5GcQtLDGXy8
Principles of Programming:
https://www.youtube.com/watch?v=lJnvq0A_7WQ
Human readable language (programming languages people know) then is
transformed into 0/1 by the compilller or script interpreter so that the computer
can read it.
First figure out what you want to do and then choose the language that is best
suitable to do that.
Compile vs Script programming languages

Compile are the oldest ( is needed to have a compiler to turn text into 1/0 to
execute that program) vs scripting (no compile necessary/ pt text onto server and
install an interpreter that reads it and displays it).
API & SDKs
API (application programming interfaces)
Used to connect programs together (ex: extract data from twitter to display
somewhere else (or vice versa)).
SDK (software development kits)
Allow developers to program for the device they want to program for (ipad)
They come with emulators (fake device simulator to see how program would run)
ITRO TO PROGRAMMING
https://www.youtube.com/watch?v=R6nApgQLFeg
Programming is about logical thinking

Programming is a controlled execution of operations
Is thinking is patterns and what is repeated
DATA TYPES:
1. Integers (integer operations give an integer- round down)

2. Float (numbers with decimal precision- float result)
3. Characters/string (character a single character/ string a collection- word)
4. Array/list (array collection of data types)
5. Hash/dictionary (store info/ has a key and a value)
CONSTANTS & VARIABLES:
Constants are just a number

Variables store information
variables can not start with a number or a special character

you can override de value of variables
declared variable should hold the same variable type
HTML & CSS

https://www.youtube.com/watch?v=3JluqTojuME
code tutorials:
https://www.youtube.com/channel/UCVTlvUkGslCV_h-nSAId8Sw
How to use live reload with your code??

In order to see what I made in the browser just put file open in the code
HTML 3 TYPES OF TAGS
HTML <html> </html>

Head <head> </head> (not what people interact with)
Body <body> </body> (what people interact with)
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
*other sub-tags: are <a> that go inside the main tags

*attributes are to give extra information about tags ( type of attribute= x)
ex: href= x
ex:
<img src= link/>
que termina en ; y que no?

que es abierto y que no? < /> vs <> </>
escribir/ hacer una lista de los different tags que hay organizados por sintax
CURSO II
https://www.youtube.com/watch?v=gBi8Obib0tw
You can use different tabs in the code editor one per page being coded (website
has different pages) and one extra for css
You need to create a link between the different tags so the code is added together.
El link puede ser ex: index.html o page2.html

CSS
*works with a selector and a rule applied to the selector
ex:
Body
{ color: red;
en css cual es la diferencia de un selector a vs .a ?

id and classes?? En html??
Nav ul vs ul? Nav se puede poner y ya?
https://www.youtube.com/watch?v=9tzyJEwO9Os
BASICS I NEED
FRAMEWORKS
CSS/HTML: BOOTSTRAP
JVSCRIPT: REACT
LEARN GIT + GITHUB
https://www.youtube.com/watch?v=sBzRwzY7G-k
HTML & CSS BOOK:
http://www.htmlandcssbook.com/code-samples/
People access websites using

software called a web browser.
Popular examples include
Firefox, Internet Explorer, Safari,
Chrome, and Opera.
When you ask your browser for

a web page, the request is sent
across the Internet to a special
computer known as a web
server which hosts the website.
Web servers are special
computers that are constantly
connected to the Internet, and
are optimized to send web pages
out to people who request them.
Some big companies run their
own web servers, but it is more
common to use the services of
a web hosting company who
charge a fee to host your site.
Screen readers are programs

that read out the contents of a
computer screen to a user. They
are commonly used by people
with visual impairments.
All websites use HTML and CSS, but content

management systems, blogging software, and
e-commerce platforms often add a few more
technologies into the mix.
When you are looking at a
website, it is most likely that
your browser will be receiving
HTML and CSS from the web
server that hosts the site. The
web browser interprets the
HTML and CSS code to create
the page that you see.
Larger, more complex sites like

these may use a database to
store data, and programming
languages such as PHP, ASP.Net,
Java, or Ruby on the web server,
but you do not need to know
these technologies to improve
what the user sees. The skills
you'll learn in this book should be
enough to help you on that road.
When you visit a website, the web server

hosting that site could be anywhere in the
world. In order for you to find the location of
the web server, your browser will first connect
to a Domain Name System (DNS) server.
When you connect to the web,
you do so via an Internet Service
Provider (ISP). You type a
domain name or web address
into your browser to visit a site;
for example: google.com,
bbc.co.uk, microsoft.com.
The unique number that the

DNS server returns to your
computer allows your browser
to contact the web server
that hosts the website you
requested. A web server is a
computer that is constantly
connected to the web, and is set
up especially to send web pages
to users.
Your computer contacts a

network of servers called
Domain Name System (DNS)
servers. These act like phone
books; they tell your computer
the IP address associated with
the requested domain name.
An IP address is a number
of up to 12 digits separated
by periods / full stops. Every
device connected to the web
has a unique IP address; it is
like the phone number for that
computer.
The web server then sends the

page you requested back to your
web browser.
Chapter 1: Structure
Structure
Markup
Tags
Elements
HTML describes the structure of pages
HTML made of elements that have an opening and closing tag
Tags act like containers

Attributes provide additional information about the elements
BODY, HEAD & TITLE

//practicar Dreamweaver???//
SEMANTIC MARKUP
There are some text elements that are not intended to affect the
structure of your web pages, but they do add extra information to the
pages they are known as semantic markup.
The reason for using these
elements is that other programs,
such as screen readers or search
engines, can use this extra
information. For example, the
voice of a screen reader may add
emphasis to the words inside
the <em> element, or a search
engine might register that your
page features a quote if you use
the <blockquote> element.
This is a very simple HTML page that

demonstrates text markup.
Structural markup includes elements such as <h1>, <h2>, and <p>.
Semantic information is carried in elements such as <cite> and <em>.
<html>
<head>
<title>Text</title>
</head>
<body>
<h1>The Story in the Book</h1>
<h2>Chapter 1</h2>
<p>Molly had been staring out of her window for about
an hour now. On her desk, lying between the copies
of <i>Nature</i>, <i>New Scientist</i>, and all
the other scientific journals her work had
appeared in, was a well thumbed copy of <cite>On
The Road</cite>. It had been Molly's favorite book
since college, and the longer she spent in these
four walls the more she felt she needed to be
free.</p>
<p>She had spent the last ten years in this room,
sitting under a poster with an Oscar Wilde quote
proclaiming that <q>Work is the refuge of
people who have nothing better to do</q>. Although
many considered her pioneering work, unraveling
the secrets of the llama <abbr
title="Deoxyribonucleic acid">DNA</abbr>, to be an
outstanding achievement, Molly <em>did</em> think
she had something better to do.</p>
</body>
</html>
CHAPTER 3: LISTS
Numbered list
Bullet list
Deninition list
Ordered lists are lists where each item in the list is

numbered. For example, the list might be a set of steps for
a recipe that must be performed in order, or a legal contract
where each point needs to be identified by a section
number.
Unordered lists are lists that begin with a bullet point

(rather than characters that indicate order).
Definition lists are made up of a set of terms along with the

definitions for each of those terms.
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>Scrambled Eggs</h1>
<p>Eggs are one of my favourite foods. Here is a
recipe for deliciously rich scrambled eggs.</p>
<h2>Ingredients</h2>
<ul>
<li>2 eggs</li>
<li>1tbs butter</li>
<li>2tbs cream</li>
</ul>
<h2>Method</h2>
<ol>
<li>Melt butter in a frying pan over a medium
heat</li>
<li>Gently mix the eggs and cream in a bowl</li>
<li>Once butter has melted add cream and eggs</li>
<li>Using a spatula fold the eggs from the edge of
the pan to the center every 20 seconds (as if
you are making an omelette)</li>
<li>When the eggs are still moist remove from the
heat (it will continue to cook on the plate
until served)</li>
</ol>
</body>
</html>
CHAPTER 4: LINKS
Creating links between pages

Linking to other sites
Email links
Links are the defining feature of the web

Because they allow you to move from
one web page to another enabling the
very idea of browsing or surfing.
You will commonly come across the following types of links:
Links f rom one website to another
Links from one page to another on the same website
Linksfrom one part of a web page to another part of the

same page
Links that open in a new browser window
Links that start up your email program and address a new

email to someone
Links are created using the <a> element. Users can click on anything
between the opening <a> tag and the closing </a> tag. You specify
which page you want to link to using the href attribute.
Many people navigate websites

by scanning the text for links.
Clear link text can help visitors
find what they want. This
will give them a more positive
impression of your site and may
encourage them to visit it for
longer. (It also helps people
using screen reader software.)
To write good link text, you can
think of words people might
use when searching for the
page that you are linking to.
(For example, rather than write
"places to stay" you could use
something more specific such as
"hotels in New York.")
DIRECTORY STRUCTURE
On larger websites it's a good idea to organize your code by placing the
pages for each different section of the site into a new folder. Folders on a
website are sometimes referred to as directories.
If you are working with a content
management system, blogging
software, or an e-commerce
system, you might not have
individual files for each page of
the website.
Instead, these systems often

use one template file for each
different type of page (such as
news articles, blog posts, or
products).
Editing the template file would

change all of the pages that use
that template. Do not change
any code that is not HTML or
you may break the page.
RELATIVE URLS:
Relative URLs can be used when linking to pages within your own
website. They provide a shorthand way of telling the browser where to
find your files.
When you are linking to a page
on your own website, you do
not need to specify the domain
name. You can use relative URLs
which are a shorthand way to tell
the browser where a page is in
relation to the current page.
This is especially helpful when
creating a new website or
learning about HTML because
you can create links between
pages when they are only on
your personal computer (before
you have got a domain name and
uploaded them to the web).
If all of the files in your site are
in one folder, you simply use the
file name for that page.
If your site is organized into
separate folders (or directories),
you need to tell the browser
how to get from the page it is
currently on to the page that you
are linking to.
If you link to the same page from
two different pages you might,
therefore, need to write two
different relative URLs.
These links make use of the
same terminology (borrowed
from that of family trees) you
met on the previous page which
introduces directory structure.
CHAPTER 5: IMAGES
Add images
Choosing the right format
Optimizing images for the web
Include an image in your web pages using HTML
Pick which image format to use

Show an image at the right size
Optimize an image for use on the web to make pages
load faster
If you are building a site from scratch, it is good

practice to create a folder for all of the images
the site uses.
As a website grows, keeping
images in a separate folder
helps you understand how the
site is organized. Here you can
see an example of the files for
a website; all of the images are
stored in a folder called images.
On a big site you might like to

add subfolders inside the images
folder. For example, images such
as logos and buttons might sit in
a folder called interface, product
photographs might sit in a page
called products, and images
related to news might live in a
folder called news.
If you are using a content

management system or blogging
platform, there are usually tools
built into the admin site that
allow you to upload images,
and the program will probably
already have a separate folder
for image files and any
other uploads.
Whenever you have many different
colors in a picture you should use a JPEG.
A photograph that features snow or an
overcast sky might look like it has large
areas that are just white or gray, but the
picture is usually made up of many different
colors that are subtly different.
Use GIF or PNG format

when saving images
with few colors or large
areas of the same color.
When a picture has an area that is filled
with exactly the same color, it is known as
flat color. Logos, illustrations, and diagrams
often use flat colors. (Note that photographs
of snow, sky, or grass are not flat colors,
they are made up of many subtly different
shades of the same color and are not as
suited to GIF or PNG format.)
The images you use on your website should be

saved at the same width and height that you
want them to appear on the page.
Images created for the web should be saved at

a resolution of 72 ppi. The higher the resolution
of the image, the larger the size of the file.
JPGs, GIFs, and PNGs belong to
a type of image format known
as bitmap. They are made up of
lots of miniature squares. The
resolution of an image is the
number of squares that fit within
a 1 inch x 1 inch square area.
The web
browsers on most desktop
computers display images at a
resolution of 72 pixels per inch
(ppi). Images in print materials
(such as books and magazines)
are made up of tiny circles called
dots. These images are usually
printed at a resolution of 300
dots per inch (dpi).
Vector images differ from bitmap images and
are resolution-independent. Vector images are
commonly created in programs such as Adobe
Illustrator.
The current method of using
vector images for display on
websites involves saving a
bitmap version of the original
vector image and using that.
Scalable Vector Graphics (SVG)
are a relatively new format used
to display vector images directly
on the web (eliminating the need
to create bitmap versions of
them), however its use is not yet
widespread.
Animated GIFs show several frames of an

image in sequence and therefore can be used to
create simple animations.
Some image editing applications
such as Adobe Photoshop allow
you to create animated GIFs.
There are several tutorials about
how to do this on the web. There
are also several websites that
allow you to upload the graphics
for the individual frames and
create the animated GIF for you.
Each extra frame of the image

increases the size of the file, and
can therefore add to the time it
takes for an image to download
(and web users do not like
waiting a long time for images to
download).
Because GIFs are not an
ideal format for displaying
photographs, animated GIFs are
really only suitable for simple
illustrations.
CHAPTER 6: TABLES
There are several types of information

that need to be displayed in a grid or
table. For example: sports results, stock
reports, train timetables.
When representing information in a table, you need to think
in terms of a grid made up of rows and columns (a bit like a
spreadsheet). In this chapter you will learn how to:
Use the four key elements f or creating tables
Represent complex data using tables
Add captions to tables
CHAPTER 7: FORMS
Traditionally, the term 'form' has referred

to a printed document that contains
spaces for you to fill in information.
HTML borrows the concept of a form to refer to different
elements that allow you to collect information from visitors to
your site.
Whether you are adding a simple search box to your website or

you need to create more complicated insurance applications,
HTML forms give you a set of elements to collect data from
your users. In this chapter you will learn:
How to create a form on your website
The different tools for collecting data
New HTML5 form controls
FORM CONTROLS:
ADDING TEXT
MAKING CHOICES
SUBMIT FORM
CHAPTER 8: EXTRA MARKUP
Specifying d XX ifferent versions of HTML

Identifying and grouping elements
Comments, meta information and iframes
CHAPTER 9: FLASH, VIDEO & AUDIO
How to a XX dd Flash movies into your site

How to add video and audio to your site
HTML5 <video> and <audio> elements
Flash is a very popular technology used

to add animations, video, and audio to
websites. This chapter begins by looking
at how to use it in your web pages.
We then focus on how to add video and audio to your site,
using either the new HTML5 <video> and <audio> elements
or a hosted service (such as YouTube or SoundCloud). In this
chapter you will learn:
How to use Flash in your web pages
How to use HTML5 <video> and <audio> elements
When to host your own video and audio and when to use a
service such as YouTube
Whether you are creating an

animation or a media player in
Flash, the files you put on your
website are referred to as Flash
movies.
To view Flash, browsers need

to use a plugin (an extra piece
of software that runs in the
browser) called the Flash Player.
The most popular way of

adding Flash into a web page
is using JavaScript. There are
several scripts that allow you
to do this without an in-depth
understanding of the JavaScript
language.
To add video to your site, there are two key

issues to understand: file formats and video
players/plugins.
The easiest way to add a video to your site is

to upload the video to a site like YouTube or
Vimeo and use the features provided on their
site to embed the video in your page.
CHAPTER 10: INTRO CSS
Understanding CSS:
Thinking Insi de the Box
The key to understanding how CSS works is to
imagine that there is an invisible box around
every HTML element.
Here you can see a simple web page that is
styled using CSS.
This example uses two documents: the HTML file (example.html)
and a separate CSS file (example.css). The fifth line of HTML uses the
<link> element to indicate where the CSS file is located.
Why use External
Style Sheets?
You do not need lots of
computers to test your site, as
there are online tools to show
you what a page looks like in
multiple browsers:
BrowserCam.com
BrowserLab.Adobe.com
BrowserShots.org
CrossBrowserTesting.com
If you come across a CSS bug,

you can use your favorite search
engine to try and find a solution.
Or you can check these sites:
PositionIsEverything.net
QuirksMode.org
CHAPTER 11: COLOR
How to specify colors

Color terminology and contrast
Background color
COLOR CONTRAST TOOL: www.snook.ca/technical/colour_contrast/colour.html

CHAPTER 12: TEXT
XX Size
and typeface of text
XX Bold, italics, capitals, underlines
XX Spacing between lines, words, and letters
The properties that allow you to control

the appearance of text can be split into
two groups:
Those that directly affect t he font and its appearance
(including the typeface, whether it is regular, bold or italic,
and the size of the text)
Those that would have the same effect on text no matter

what font you were using (including the color of text and
the spacing between words and letters)
If you design on a Mac, it is important to check what the typefaces look

like on a PC because PCs can render type less smoothly. But if you design
on a PC, then it should look fine on a Mac.
The default size of text in a
browser is 16 pixels. So if you
use percentages or ems, you
calculate the size of text you
want based on the default size
of the text used in browsers.
For example, you could scale
down to 12 pixels for body copy
and scale up to 24 pixels for
headings.
Recently, some web designers
have started to leave the body
text at the default size of 16
pixels and adjust the other font
sizes using a scale that keeps
the relative proportions of this
one.
Pixels are relative to the

resolution of the screen, so the
same type size will look larger
when a screen has a resolution
of 800x600 than it would when
it is 1280x800.
CHAPTER 13: BOXES
XX Controlling
size of boxes
XX Box model for borders, margin and padding
XX Displaying and hiding boxes
At the beginning of this section on CSS,

you saw how CSS treats each HTML
element as if it lives in its own box.
You can set several properties that affect the appearance of
these boxes. In this chapter you will see how to:
Control t he dimensions of your boxes
Create borders around boxes
Set margins and padding for boxes
Show and hide boxes
CHAPTER 14: LISTS TABLES AND FORMS
Specifying b XX ullet point styles

Adding borders and backgrounds to tables
Changing the appearance of form elements
CHAPTER 15: LAYOUT
Controlling t XX he position of elements

Creating site layouts
Designing for different sized screens
In this chapter we are going to look at
how to control where each element sits
on a page and how to create attractive
page layouts.
This involves learning about how designing for a screen can be

different to designing for other mediums (such as print). In this
chapter we will:
Explore different ways to position e lements using normal

flow, relative positioning, absolute positioning and floats.
Discover how various devices have different screen sizes

and resolution, and how this affects the design process.
Learn the difference between fixed width and liquid layouts,

and how they are created.
Find out how designers use grids to make their page

designs look more professional.
SCREEN SIZES
Different visitors to your site will have different sized screens that show
different amounts of information, so your design needs to be able to
work on a range of different sized screens.
Resolution refers to the number of dots a screen shows per inch. Some
devices have a higher resolution than desktop computers and most
operating systems allow users to adjust the resolution of their screens.
It is interesting to note that

the higher the resolution, the
smaller the text appears. Many
mobile devices have screens
that are higher resolution than
their desktop counterparts.
PAGE SIZES
Because screen sizes and display resolutions vary so much, web

designers often try to create pages of around 960-1000 pixels wide
(since most users will be able to see designs this wide on their screens).
The area of the page that users

would see without scrolling was
often referred as being above
the fold (a term newspapers
had originally coined to describe
the area of the front page you
would see if the paper were
folded in half).
usability
studies have shown that visitors
can judge a page in under a
second so it is still important to
let new visitors know that the
site is relevant to them and their
interests.
As a result, many designs still
try to let the user know what the
site is about within the top 570-
600 pixels, as well as hint at
more content below this point.
But do not try to cram too much
into that top area.
LAYOUT GRIDS
Composition in any visual art (such as design, painting, or photography)

is the placement or arrangement of visual elements how they are
organized on a page. Many designers use a grid structure to help them
position items on a page, and the same is true for web designers.
On the right, you can see a set of

thick vertical lines superimposed
over the top of a newspaper
website to show you how the
page was designed according to
a grid. This grid is called the 960
pixel grid and is widely used by
web designers.
<!research web design grids>

CSS FRAMEWORKS
CSS frameworks aim to make your life easier by providing the code for
common tasks, such as creating layout grids, styling forms, creating
printer-friendly versions of pages and so on. You can include the CSS
framework code in your projects rather than writing the CSS from scratch.
Responsive Layout framework: https://unsemantic.com/
To create a 12 column grid, an

element that contains the entire
page is given a class attibute
whose value is container_12.
This sets the content of the
page to be 960 pixels wide and
indicates that we are using a 12
column grid.
There are different classes for

blocks that take up 1, 2, 3, 4,
and up to 12 columns of the grid.
Each block uses class names
such as grid_3 (for a block that
stretches over three columns),
grid_4 (for a block that
stretches over 4 columns) and
and so on through to grid_12
(for a box that is the full width
of the page). These columns all
float to the left, and there is a 10
pixel margin to the left and the
right of each one.
There are several other gridbased

CSS frameworks available
online, such as those at:
blueprintcss.org
lessframework.com
developer.yahoo.com/yui/
grids/
CHAPTER 16: IMAGES
Controlling s XX ize of images in CSS

Aligning images in CSS
Adding background images
Controlling the size and alignment of

your images using CSS keeps rules that
affect the presentation of your page in
the CSS and out of the HTML markup.
You can also achieve several interesting effects using

background images. In this chapter you will learn how to:
Specify the size and a lignment of an image using

Add background images to boxes
Create image rollovers in CSS

CHAPTER 17: HTML LAYOUT
HTML5 layout elements

How old browsers understand new elements
Styling HTML5 layout elements with CSS
DESIGNING WEBSITES:
What is a website?
Who is it for?
What are they using it for?
What info they need?
How long are they staying?
To wrap up the book we are going to look

at some practical information that will
help you launch a successful site.
There are entire books written about each of the topics

covered in this chapter but I will introduce you to the key
themes that each subject deals with and give you pointers for
what you need to be considering. You will see:
The basics of search engine optimization
Using analytics to understand how people are using your

site after it has launched
Putting your site on the web
//
types of programming
procedural programming vs object oriented programming
procedural is based on instructions that the computer needs

to execute
vs object orientes programming

Javascript + Jquery
Object oriented vs process oriented programming
* Javascript makes pages interactive:
1. Access elements from an html page

2. Modify them as they are been interacted with
3. Program a set of steps to happen
4. Specify scenarios and triggers
HTML: attributes
CSS: Properties
(both have name: value structure)
2 type of elements:
1. self closing
2. non self closing
HTML
value usually inside
ex: <p attribute name= value </p>
CSS
Selector{ property name: property value;}

Coding

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Coding

Enviado por

Direitos autorais:

Formatos disponíveis

HTML & CSS

Goal 1: really understand and make things in html and css

HTML provides structure

Hyper text markup language

Markup language enables the computer to interpret text

Hypertext provides links to other text

starting your HTML document with a document type declaration.

(funcionan como { en java)

Angle brackets: <>

All of the code above demonstrates what is sometimes referred to as "boilerplate

Unordered list for text you decide to format in bullet points:

OPEN LINK IN NEW WINDOW:

The alt attributes also serves the following purposes:

HTML files also allow you to add comments to your code.

Let's review what you've learned so far:

Let's review what you've learned so far:

1. A CSS selector targets an HTML element.

3. CSS declarations must end in a semicolon (;)

5. Multiple element selectors can be used to style multiple elements at once.

7. CSS follows certain best practices for spacing and indentation:

1. Foreground color refers to the actual color of an element, styled with

Link to google fonts

For example, Google offers Google Fonts, a directory of thousands of open-source

CSS: FONT SIZE

CSS: SPACING BETWEEN TEXT

When the line height of an element is modified, you are manipulating

When the line-height property of an element is modified, the leading is increased,

CSS: LETTER SPACING

CSS: FONT WEIGHT

// tambin se puede poner font-weight:100;

CSS: ITALIZE WORDS

CSS: UPPER/LOWER CASE

To move, or align, text, we can use the text-alignproperty.

Let's review what you've learned so far:

Venturing into more advanced CSS styling.

In the example above, the heading is labeled with an id of botswana.

<div id="header-text">

**No entiendo por qu cambio el sintax**

STYLE ID: CSS

IF WANT TO ADD ID SELECTOR IN CSS STYLE SHEET ADD IT UNDER

CSS: STYLE: CLASS

The .breaking selector targets all elements with a class of breaking.

HTML: LABLING ELEMENTS: 2 CLASSES

The books, however, must be differentiated based on their country of origin. To

ORGANIZE CLASSES + IDS

Keep HTML code easy to read.

HTML: DIVS + CLASSES

Let's review what you've learned so far:

CSS: BOX MODEL

CODE TO REVEAL BOXES AROUND ELEMENTS:

The overflow property controls what happens to content when it spills,

All HTML elements are contained within a box.

CSS: Box Borders

Let's review what you learned:

CSS: DEFAULT STYLE SHEETS

CSS: HIDE ELEMENTS

The visibility property can be set to one of the following values:

CSS: CHANGING THE BOX MODEL

CSS: PAGE LAYOUT

The default position of an element can be changed by setting

One way to modify the default position of an element is by setting

Another way of modifying the position of an element is by setting its position

We can fix an element to a specific position on the page (regardless of user

The float property can be set to one of two values:

No entiendo por qu cambio el sintax