You are on page 1of 319

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.

For anchor elements. you can thank the anchor element's target attribute. 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. The value of the attribute. The target attribute can be added directly to the opening tag of the anchor element. For a link to open in a new window. Attributes are made up of the following two parts: 1.The anchor element in the example above is incomplete without the href attribute. . The target attribute specifies that a link should open in a new window. 2. They live directly inside of the opening tag of an element. Attributes provide even more information about an element's content. 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. The name of the attribute. the targetattribute requires a value of _blank. just like the href attribute.

which is similar to the href attribute in links.All of the elements you've learned about so far (headings. This element is special because it does not have a closing tag. like images? IMAGES The <img> element lets you add images to a web page. 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. This is required for a self-closing element. paragraphs. . This is because the <img>element is a self-closing element. it only has an opening tag. Also note that the end of the <img> element has a forward slash /. HTML helps support visually impaired users with the alt attribute. visually impaired users require more support from your web page so that they can experience the content on your page. the value of src must be the URL of the image. Note that the <img> element has a required attribute called src. lists. Part of being an exceptional web developer is making your site accessible to users of all backgrounds. Specifically. In this case.

With this technique. Poner texto que se quiere display entre "queso con coso" ayuda a diferenciar de atributos de elementos  LINK OF IMAGE: Thankfully. a user can mouse over the area originally intended for the image and read a brief description of the image. the altattribute should not be used. If an image fails to load on a web page. Note: If the image on the web page is not one that conveys any meaningful information to a user (visually impaired or otherwise).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. . it's possible to turn images into links by simply wrapping the <img> element with an <a>element. This is made possible by the description you provide in the alt attribute. HTML allows you to turn nearly any element into a link by wrapping that element with an anchor element.

html. For example. you can use HTML's line break element: <br />.It's important to understand that the formatting of the code in index. you would not be able to accomplish this by simply adding more spacing between the paragraph element and image element within index. This is because the browser ignores whitespace present in HTML files like index. if you wanted to increase the space between a paragraph and an image on your web page.html will not affect the positioning of the elements within the browser.html. SPACING If you are interested in modifying the spacing in the browser. .

Indentation is intended for elements nested within other elements.The line break element is one self-closing tag. In later units. 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. but it's likely that you'll come across them every now and then. the W3C recommends 2 spaces of indentation when writing HTML code. You can use it anywhere within your HTML code and a line break will be shown in the browser. . web developers often use indentation. At the time of writing. Note: Line breaks are not the standard way of manipulating the positioning of HTML elements. The World Wide Web Consortium (W3C) is responsible for maintaining the style standards of HTML. you'll learn more advanced techniques for positioning HTML elements.

" This practice is useful when you want to experiment with new code without having to delete old code. HTML files also allow you to add comments to your code.In the example above. the "TAB" key on your keyboard should not be used for indentation.and end with -->. Unless your text editor has been configured properly. The spaces are inserted using the spacebar on your keyboard. Let's review what you've learned so far: . n the example above. Any characters in between will be treated as a comment. Comments begin with <!-. a valid HTML element (an anchor element) has been "commented out. the list items are indented with two spaces.

or Cascading Style Sheets. 10. 2. element positioning. 3. Images help support visually impaired users when <img> elements include the alt attribute.don't forget the href attribute! 6. To use the <style> element. Images can be added with the <img> element . This is possible because of the <style> element. You can add links to your web page using the <a>element . font sizes. The <style> element allows you to write CSS code between its opening and closing tags. The W3C recommends 2 spaces of indentation for nested HTML elements. Comments are used to take notes inside of an HTML file. Ordered lists are created with the <ol> element and list items are added using the <li> element. images. 8. 9. font types. White space in the HTML file does not affect the positioning of elements in the browser. 1. 4. -_____________________ CSS CSS. You can add a comment with <!-. is a language that web developers use to style the HTML content on a web page. CSS is the tool for the job! Although CSS is a different language than HTML.This is a comment -->. Unordered lists are created with the <ul>element and list items are added using the <li>element.don't forget the src attribute! 7. shadows. You can add headings of different sizes using the different headings elements: <h1> through <h6>. 5. it's possible to write CSS code directly within an HTML file. You can turn anything into a link by wrapping it with an <a> element. 11. If you're interested in modifying colors. and more. Paragraphs are added with the <p> element. it must be placed inside of the head. .

Overall.Once <style> is placed in the web page's head. Similarly. 2. It's common for developers to add substantial amounts of custom CSS styling to a web page. we can begin writing CSS code. You can create a CSS file by using the . Maintaining a clear distinction between web page structure (HTML) and web page styling (CSS). .css With a CSS file. Creating a large HTML file that is difficult to read and maintain (by you and other developers). CSS files are meant to contain only CSS code. HTML files are meant to contain only HTML code. this can result in an inefficient workflow. When all of that CSS code is placed within a <style> element in an HTML file. like so: style. you can write all the CSS code needed to style a page without having to sacrifice the readability and maintainability of your HTML file.css file name extension. you risk the following two things: 1.

or path. It is a self- closing tag and requires the following three attributes: 1. rel . In order to apply the styling to the web page. to the CSS file. a CSS file). 3. The value of this attribute should be set to text/css. the HTML file must know exactly where the CSS code is kept.this attribute describes the type of document that you are linking to (in this case.When HTML and CSS code are in separate files. type . the value should be set to stylesheet. the styling can't be applied the web page. we'll have to link the HTML file and the CSS file together. Because you are linking to a stylesheet. The <link> element must be placed within the head of the HTML file. otherwise. ref .like the anchor element. . the value of this attribute must be the address. 2. You can use the <link> element to link the HTML and CSS files together.this attribute describes the relationship between the HTML file and the CSS file.

To actually style the element. you'll learn how to use more specific CSS selectors so that you can select any element you want. then you can specify a relative path instead of a URL. Note: The p selector in the example above will select all <p> elements on the web page. the syntax to select it using CSS is: In the example above.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. For example. It's not enough to simply select an HTML element in a CSS file. like so: To style an HTML element using CSS. you need to specify two things inside the body of the selector: . all paragraph elements are selected using a CSS selector. but without the angle brackets. Note that the CSS selector essentially matches the HTML tag for that element. you must first select that element in the CSS file. Later in this course. to style a <p> element. The selector (in this case) is p.

Blue for color. what if you wanted to change the color of 10 different elements to Aquamarine in CSS?. Property . 18px for size.) ends all declarations. color.the property you'd like to style of that element (i. A CSS declaration consists of a property and a value. Finally. etc. For example.). is referred to CSS declaration.. Note that a semicolon (.the value of the property (i.e. size. Value . Styling with CSS would be very inefficient if you were forced to manually style the same property across many elements.. 1. 2.e. The line color: Blue. etc. 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. .).

it's often more efficient to set that styling using the universal selector. . What makes the universal selector so special? When all elements on a web page require the same styling. you can select multiple elements at once so that you can save time styling a shared property. There's a special selector that can instantly select every single element on the web page: the universal selector. you can modify (or remove) that styling for specific elements that don't require it. In the example above. is used to select every element on the page and set the font to Arial. the <h1> heading. Just like HTML. the universal selector. A multiple element selector can save you time when you want to style the same property across many elements. *. Afterwards. In the example above. and the paragraph have all been styled to appear Green using a multiple element selector. CSS follows certain best practices for spacing and indentation. the <h2>heading.Fortunately.

Two spaces of indentation should be used for CSS declarations. you can also leave comments in your CSS file. No extra spaces should exist between opening and closing curly braces ({ and }) and CSS declarations (as in the example above). In the example above. 1. CSS declarations style HTML elements. One space should be used between the selector and the opening curly brace ({). Just like HTML. 3. One line of spacing should exist between CSS rules. like so: Let's review what you've learned so far: 1. 4. 2. CSS comments begin with /* and end with */. there is one line of spacing between the CSS rule for the heading and the CSS rule for the paragraph. A CSS selector targets an HTML element. Declarations must contain the following two things: . 2.

The foreground color 2. when a heading is styled to appear green. the foreground color of the heading has been styled. CSS declarations must end in a semicolon (. Color can affect the following design aspects: 1. A CSS rule consists of a CSS selector and the declarations inside of the selector. the background color of the heading has been styled In CSS. 6. Conversely. it's important to make two distinctions about color. these two design aspects can be styled with the following two properties: 1.  value . 2.  property .the value for the property you are styling.this property styles an element's background color. For example. 7. . when a heading is styled so that its background appears yellow. Comments keep code easy to read and allow you to experiment with new code without having to remove old code. Multiple element selectors can be used to style multiple elements at once.  Two spaces of indentation for CSS declarations.the property you want to style. CSS: Colors Before discussing the specifics of color.  No spacing between CSS declarations and the opening and closing curly braces of the CSS rule.  One line of spacing between CSS rules.) 4. background-color . CSS follows certain best practices for spacing and indentation:  One line of spacing between a selector and the opening curly brace. 3. color . 5. The background color Foreground color is the color that an element appears in.this property styles an element's foreground color.

Over the past few exercises. you don't have to! There are plenty of available resources on the Internet that list all of the named colors in CSS. If you're ever in need of a named color. like the one we linked you to above. or Cyan. Blue. you might be wondering if you are expected to memorize the list of 147 named colors that CSS offers. these colors are technically known as named colors. a quick Google search will yield the results you are looking for. . you've seen CSS examples that use colors like Red. Fortunately. At this point. There are a total of 147 named colors. In CSS.

you have the option of using RGB colors. in that order. however. The three numbers in the parentheses represent the values for R.777. Green. If you're ever in need of a color picker resource. and B. Blue) colors offer the option of 16.216 possibilities? Thankfully. the value of color is set to rgb().Although named colors provide 147 different options.777. you can use the rgb() value when styling a color. This results in 16. to specify color mixtures.777. green (G). and blue (B).216 color options.216 possible colors. G. G. 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. To take advantage of the full spectrum of colors that CSS supports. but they follow a different syntax.216 possible colors. this is a small amount when you consider the flexibility of CSS. There's an additional way to specify colors in CSS: hexadecimal color codes. To use RGB colors. RGB (Red. often referred to as "hex color codes" for short. Each color (R. When specifying an RGB color mixture. a quick Google search will yield the results you are looking for. Hex color codes also offer 16. or B) can take on 1 of a possible 256 values (between 0 and 255). How can you tell what color the RGB values in the example above will result in? Are you expected to memorize 16. How is that possible? RGB colors work by mixing together different amounts of red (R).777. the values are in base 10. use base 16. . or hexadecimal base (hence the name). In the example above. Hex color codes. Note that you can use rgb() for background colors as well.

When read from left to right. Note: When a hex color code is composed of entirely of the same characters. introduces a new way to specify colors using HSL colors. All hex color codes begin with a # character. like so: The current revision of CSS. each group of two characters responds to a value for red. respectively. AA refers to the value for green. and 34refers to the value for blue. CSS3 (at the time of this writing). It's possible to convert back and forth between RGB values and hex color codes (color pickers often help with this conversion). this is what each means: . green and blue. HSL stands for Hue. In the example above. and Lightness. RGB values and hex color codes are different ways to represent the same thing: color. the hex color can be abbreviated. Specifically. Not really. Saturation. 09 refers to the value for red.

inclusive. The alpha value can be a number between 0 or 1. It can take on values between 0 and 360. However.the amount of gray in a given color. Lightness . the alpha value has been set to 0. using hsla(): . lightness is specified using a percentage between 0% and 100%. In HSL. Note: The alpha value can also be used for HSL colors. Saturation . 3.the amount of white in a given color. Similar to saturation. In the example above. you'll learn how to work around support issues for colors. whereas 100% represents full saturation. Hue . The percentage 0% represents a shade of gray. older browsers may not support it. Note: Because HSL is a part of CSS3. It represents the opacity of a color. The extra a character in the rgba() value is known as the alpha value. Opacity is a measure of how transparent a color is. To modify opacity in RGB colors. hue is represented on a color wheel. The percentage 0% represents black. In a later exercise. CSS offers the rgba()value. whereas 100% represents white. there is one feature that RGB colors support that hex color codes do not: opacity.the technical term that describes what we understand as "color. This indicates that the color of the heading will be set to 50% of its normal opacity. 50% is normal.5. 2. 1. You learned that RGB and hex color codes are two different methods of representing the same thing: color. Note the slight difference in rgb() and rgba(). saturation is specified using a percentage between 0% and 100%." In HSL.

RGB and hexadecimal colors offer over 16 million color possibilities. we can add multiple CSS color declarations. 8. 4. styled with the color property. Foreground color refers to the actual color of an element. so additional declarations should be made to support a wide audience of users. 3. There are many color picker resources available on the Internet to help you select specific colors. let alone the same version of a given browser. As these properties become more advanced. There are 147 named colors available. 6. however. HSL is a new way of defining colors in CSS3. just in case a user's browser can't support a certain declaration.RGB colors. 1. CSS: Fonts The phrase "type of font" refers to the technical term typeface. 2. You can modify the opacity of a color with RGBa or HSLa colors. styled with the background-colorproperty. Not all browsers support newer CSS features. 5. it's important to keep in mind that not all users browse the Internet with the same browser. 7. as well as provide colors in different formats. like opacity or HSL. hex color codes. Specifically. and HSL colors offer web developers an extraordinary amount of color customization options. or font family. we must include redundant color options in our CSS code that can cater to a wide audience of different browsers. . Because of this. Background color refers to the color behind an element.

it must be enclosed in double quotes (otherwise it will not be recognized). flat edges. to classify them as one of the following two types: serif fonts and sans-serif fonts. you can use the font- family property. typographers have refined their craft and have developed many different typefaces. . Examples include fonts like Times New Roman or Georgia.  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. 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.To change the typeface of text on your web page. which has allowed them. You may be familiar with this typeface if you have ever used a formatted word processor. in some cases.the letters in these fonts have extra details on the ends of each letter. When the name of a typeface consists of more than one word. 1.  You've probably noticed that we haven't been specifying a typeface in previous exercises of this course. among others.  Serif .the letters in these fonts do not have extra details on the ends of each letter. letters have straight. Some examples include Arial or Helvetica.  Sans-Serif .  It's a good practice to limit the number of typefaces used on a web page to 2 or 3. We'll learn how to work around this issue in a later exercise. like so: The practice of typography has been around for centuries! Over time. Instead.

" The fonts specified after Garamond are the fallback fonts. To use fallback fonts. When the stylesheet specifies a font not installed on a user's computer. If both of those fonts are not available. like Times New Roman and Arial. the pre- installed fonts can be used as fallback fonts for users.Earlier. respectively. the following syntax is required: The CSS rule above says: "Use the Garamond font for all <h1> elements on the web page. What happens when a font is not installed on a user's computer? Most computers have a small set of typefaces pre-installed. 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. use the Times font. Link to google fonts . This small set includes serif fonts and sans-serif fonts. use any serif font pre-installed on the user's computer. If that font is not available.

you can use a <link> element. For example. To use these fonts. . you can link to a specific Google Font in your HTML code and use it immediately in your stylesheet. 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. This avoids having to determine whether or not that font is installed on a user's computer. you don't have to predict which fonts are installed on a user's computer. a directory of thousands of open-source fonts that are free to use by anyone. Google offers Google Fonts. you can use the font-size property. To use a Google Font. a user's browser can display the typeface you specify. Because the HTML file links directly to the Google Font. Many (but not all) of the new fonts that emerge on a daily basis are being centralized in directories made available for public use.Fortunately.

the leading is increased. resulting in an increase of the vertical spacing between lines of text. What exactly does px mean? CSS: SPACING BETWEEN TEXT To avoid this problem. the spacing between lines of text increases. you are manipulating the leading (pronounced "ledding") of the font. .In the example above. When the line height of an element is modified. When the line-height property of an element is modified. since ems offer a spacing relative to the size of the text on the page. The line height can be modified using pixels or ems. the font-size of all paragraphs was set to 18px. but the unit of ems is preferred. which can make text easier to read. you can modify the spacing between lines of text with the line-height property. When the line height is increased.

CSS: WORD SPACING You can also increase the spacing between words in a body of text. In CSS. To do so.3em. It's common to bold important headings or keywords.25em. Kerning can be adjusted with the letter-spacing property in CSS. CSS: LETTER SPACING The technical term for adjusting the spacing between letters is called "kerning".05em in word spacing. the word spacing is set to 0. the font-weight property turns bold on or off. . CSS: FONT WEIGHT You've probably noticed bolded text across many different web sites. which represents an increase of only . technically known as word spacing. In the example above. you can use the word-spacing property: The default amount of space between words is usually 0.

we could set the font weight of that particular element to normal. essentially "shutting off" bold for that element.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. however. If a certain section of text was required to appear normal. we could select all text elements and change their font weight to bold. CSS: ITALIZE WORDS . // también se puede poner font-weight:100.

we can use the text-alignproperty. 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. The font-style property also has a normal value. or align. Depending on the type of content a web page displays.You can also italicize words with the font-styleproperty. which could make code difficult to read. . CSS:ALIGN TEXT To move. For example. it may make sense to always style a specific element in all uppercase or lowercase letters. 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. text. The italic value causes text to appear in italics.

CSS: SUMMARY Let's review what you've learned so far: 1. 9. 6. Text can appear in all uppercase or all lowercase with the text- transform property. 5.centers text. Text can appear bold with the font-weightproperty. 2. Font size can be specified using pixels. 3. The spacing between letters. the kernel. 2. 11. . Text can be aligned with the text-alignproperty. ems. Text can appear in italics with the font-styleproperty.aligns text to the left hand side of the browser. 3. Fallback fonts are used when a certain font is not installed on a user's computer. left . 10. Sans-Serif fonts do not. Google Fonts provides free fonts that can be used in an HTML file with the <link> element. 8. right . 7. The horizontal spacing between words can be modified with the word- spacing property. Serif fonts have extra details on the ends of each letter.The text-align property can be set to one of the following three values: 1. or percentages. 4. 12. The vertical spacing between lines of text can be modified with the line- spacing property. can be modified with the letter- spacing property. The font-family property changes the typeface of text. center .aligns text to the right hand side of the browser.

ORGANIZING HTML CODE  Writing clear. you'll learn how to style specific HTML elements at-will. By organizing HTML code with labels for elements. every selector we used targeted all elements of a certain type. We can then style that specific element in the stylesheet.css STYLE ID: CSS . we can style individual HTML elements! Specifically. or ID. we can use the idattribute on an HTML element. Instead. In the last unit.html vs style. What purpose do IDs serve? IDs are intended to label unique elements in an HTML file.  Venturing into more advanced CSS styling. the heading is labeled with an id of botswana. we can label HTML elements with a unique identifier. With the proper labels. maintainable HTML code for yourself and for other developers. In the example above. we had no way of targeting specific HTML elements. you learned how to style color and fonts. No two HTML elements should ever share the same ID — that would defeat the purpose of a unique identifier! Ex: <div id="header-text"> <!--Add an id to this div --> **No entiendo por qué cambio el sintax** index. Unfortunately. To label an element with an ID.

the HTML element with an ID of botswana is targeted with the ID selector #botswana. In the example above. you can use an ID selector in the stylesheet. the HTML element with an ID of botswana is targeted with the ID selector #botswana. CSS offers a solution to this limitation. classes can be used to label them. we can use the class attribute on an HTML element. For multiple elements that should share the same styling. To label an element with a class.Now that you know how to label HTML elements with an ID. we can style that specific element in the stylesheet. 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. . To style a specific element labeled with an ID.

all elements with a class of sciencewill have their typeface. you'll notice that it's very common to style groups of elements using classes. there are two headings with a class of science. .In the example above. In the example above. classes are by far the most commonly used for styling groups of elements. In fact. and letter case modified. While IDs still play a critical role when you move into languages like JavaScript. As you learn more about web development. In the example above. Class selectors begin with a period (.) and are immediately followed by the name of the class. CSS: STYLE: CLASS To style elements of the same class. you're more likely to see classes more often than you see IDs. color. you can use a class selector in the stylesheet. Why? HTML elements are often labeled with class names that reflect the content they represent on the web page. perhaps a news company decided that all news headlines about science should be labeled with a class of science.

breaking selector targets all elements with a class of breaking. you learned how to use a multiple element selector to style multiple elements at once. Unless otherwise specified. for multiple elements on a web page to share a specific styling.breaking selectors? The . the rest of this course will use the element. In a previous exercise. For example.class selector syntax. The example above uses a new selector: p.breaking selector targets only <p> elements with a class of breaking. even when that element must share some styling with other elements. The p. CSS does not limit you to selectors that target a single element or class. but the paragraph may require a styling better suited for paragraphs.CSS: Variations The class selector targets all elements of a particular class. but for one of those elements to differ slightly. as in the following example. It's possible. .breaking and p. a heading and a paragraph (both with a class of breaking) may need to share the same typeface. This type of selector allows you to be even more specific about a particular element's styling.breaking. What's the difference between the . however.

typeface) are labeled with the same class. How is this functionality useful? You learned that elements that share a styling (e. HTML: LABLING ELEMENTS: 2 CLASSES It's also possible to label HTML elements with more than one class. When those same elements must also be differentiated.g.The same syntax can be used to style multiple classes at once. . labeling with an additional class is helpful. however.

the HTML code uses main headings for two different book titles. however. HTML elements can be labeled with many classes. simply include the class within the double quotes. but whenever possible.In the example above. immediately after the first class. ORGANIZE CLASSES + IDS  Keep HTML code easy to read. To differentiate the book titles based on this information. which style the color of the heading in the CSS code. . To label an HTML element with an additional class. two additional classes. domestic and foreign. In this example. must be differentiated based on their country of origin. are applied to the respective headings. it's best to limit an element to four classes at most. The books. so the headings are labeled with a class of book and are then styled with a typeface of Georgia. all book titles must share the same typeface.

You can think of the div as a box. HTML offers an element that is the backbone of code organization: the div. rather than labeling individual elements with classes. . or any other section of a page. there will be many other times when an individual element will need to be labeled with a class. a <div> can be used to group together all of the elements that make up the navigation for a web page. that groups elements that belong together. HTML: DIVS + CLASSES (divs son como cajas que guardan cajas mas pequeñas (clases)) Now that you know how to organize code into sections using divs. or container. we can start labeling divs with classes instead. represented by <div> in HTML. This does not mean that labeling individual elements with classes is no longer useful. Even when divs are labeled with classes. For example. Group elements that belong together.

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: Let's review what you've learned so far: 1. In the stylesheet. not raw text. Divs are intended to contain other HTML elements. IDs label HTML elements that are unique to the web page (an element that appears only once). a heading and paragraph are contained within a div that has a class of container. classes. 2. They make styling more efficient. the background color and typeface of the div have been styled. Does it make sense to style a div directly then? When a div is styled. 3. Classes label elements that will share the same styling. .In the example above. and divs. Code is a lot more readable when it is organized using IDs.

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

Ems . ems and percentages allow boxes to scale depending on the size of a user's display. all boxes have default dimensions. Because many web pages are now accessed on mobile devices and other displays of differing sizes.This unit sets the dimensions of the box relative to the size of the text within the box.An element's box has two dimensions: a height and a width. 2. consider another box of class red. Pixels . 3. These two properties can be specified with the following units of measurement: 1. These default dimensions are automatically set to hold the raw contents of the box.You learned about pixels when you learned about fonts. you can use the width and height properties. Developers often use ems or percentages to set box dimensions. set to a height of 37% and a width of 45%.This unit sets the dimensions of the box relative to the size of the box that it is encased in. The resulting dimensions of the red box would be a height of 74 pixels and a width of 90 pixels. For example. To modify the default dimensions an element's box in CSS. . In HTML. This unit lets you set the exact size of an element's box. consider an element (a box) of class blue set to a height of 200 pixels and a width of 200 pixels. Inside of blue. Percentages .

CSS: RESPONSIVE WEB DESIGN Because a web page can be viewed through displays of differing screen size. To avoid this problem. max-width . min-width .this property ensures a maximum width for an element's box. 1.this property ensures a minimum width for an element's box. . CSS offers two properties that can limit how narrow or how wide an element's box can be sized to. 2. the content on the web page can suffer from those changes in size.

hidden .when set to this value. . min-height . any content that overflows be hidden from view. It can be set to one of the following values: 1. In the example above. the height of all paragraphs will not shrink below 150 pixels and the height will not exceed 300 pixels.In the example above. max-height . How can we ensure that this doesn't happen? The overflow property controls what happens to content when it spills. scroll . or overflows. outside of its box.this property ensures a maximum height for an element's box. a scrollbar will be added to the element's box so that the rest of the content can be viewed by scrolling. You'll learn how to work around this issue in the next exercise. 2.this property ensures a minimum height for an element's box. the contents will spill outside of the box. 2. nor will the width exceed 600 pixels.when set to this value. When the value of the max-height property is set too low. resulting in content that is not legible. 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. 1. You can also limit the minimum and maximum height of an element. the width of all paragraphs will not shrink below 300 pixels.

or percentages.border appears as a picture frame.  Width and height dimensions can be set using one of three units of measurement: pixels.border appears to cut into the screen. groove .  Boxes have two dimensions: a width and a height.no border. 4.Summary  All HTML elements are contained within a box. the content may overflow. These dimensions can be modified with the width and height properties.border appears to pop out of the screen. hidden or none . dotted .  If an element's box becomes too small. 3. This property can take on one of the following values: 1.border is a groove (or carving). double . ridge . A border's style can be set with the border-style property.border is a solid line. 7. dashed . 5. 9. outset . The overflowed content can be controlled with the overflow property. 8. . 6.  A minimum and maximum width or height can be set for a box.border is a series of square dots.border is a series of lines or dashes. solid .border is two solid black lines. ems. This helps ensure that content remains legible when a user shrinks or expands their browser window. 2. inset . CSS: Box Borders It's not possible to view a box's border if the border's style has not been set.

The value of border-width is given in pixels. thin 2. t's also possible to also set the border-widthproperty to one of the following named thicknesses: 1. .You can control the thickness. medium 3. of borders with the border-width property. another version of the border-widthproperty allows you to specify the width for each side of the border. or width. thick What if you don't want the border thickness to be the same on all four sides? In that case.

you can use the following properties: 1. border-right-width 3.The values in the example above refer to the border width in clockwise order (top: 3 pixels. border-bottom-width 4. right: 1 pixel. bottom: 2 pixels. border-top-width 2. . border-left-width The color of a border can also be customized with the border-color property. If you'd like to be even more specific about the width of different sides of the border. left: 1 pixel).

and color can be achieved with the border property. width. The shorthand way of setting border style. It's considered best practice to follow the width-style-color order when using the border property. or to 100%. and hex colors. RGB(a) colors. . You can create a border that is a perfect circle by setting the radius equal to the height of the box. It's common to use hex colors for borders. The corners of an element's border box can be modified with the border- radius property. Let's look at how we can decrease the amount of code bloat with this property. but you'll likely also come across RGB(a) colors as well.The border-color property accepts colors in the various formats you learned about earlier: named colors.

or width. you can modify this space with the padding property. and color of a border can bloat code. This concept is critical in understanding how to customize the way content is displayed to users. You can style the borders of an element's box. It's more efficient to use the shorthand border property and specify all three properties at once. Their corners can be rounded with the border- radiusproperty. 6. In CSS. of a border. Individually setting the style. . 5. 3. thickness. The border-width property allows you to set the thickness. 2. The space between the contents of a box and the borders of a box is known as padding.Summary: Let's review what you learned: 1. in that order. The border-style property allows you to change the style of border used. CSS: CONTENT In this lesson. 4. The border-color property allows you to change the color of a border. you'll learn how to modify the spacing around the content inside of the box. Box borders don't have to be square.

the four values 5px 10px 5px 10px refer to the amount of padding in a clockwise rotation. you learned how to set the width and height of a box. another version of the padding property lets you specify exactly how much padding there should be on each side of the content. increasing the dimensions of the box. In the example above. you can use the following shortcut: .The code in the example will put 10 pixels of space between the content of the paragraph (the text) and the box borders. and that the left and right values for padding will also equal each other. on all four sides. When you're certain that the top and bottom values for padding will equal each other. Note: In the last couple of lessons. When padding is set for a box (as in the example above) it will be added to the width and height of a box. The padding property is particularly useful at making text easier to read when the text has a border around it. In that case. We'll learn how to avoid this problem in the next lesson.

padding-left So far.The first value. The second value. 10px sets a padding value the left and right sides of the content. You can adjust this spacing with the marginproperty. padding-bottom 4. The fourth and final aspect of the box model is margin. you've learned about the following aspects of the box model: dimensions. and padding. MARGIN The margin refers to the space directly outside of the box. 5px. sets a padding value for the top and bottom sides of the content. padding-top 2. borders. you can use the following properties: 1. . If you want to be even more specific about the amount of padding on each side of a box's content. padding-right 3.

when you're certain that the top and bottom values for margin will equal each other.The code in the example above will place 20 pixels of space on the outside of the paragraph's box. you can use the following properties: 1. on all four sides. Just like the padding shortcut. This means that other HTML elements on the page cannot come within 20 pixels of the paragraph. margin-right . 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. ust like padding. what if you don't want equal margin on all four sides of the box? In that case. margin-top 2. another version of the margin property lets you specify exactly how much margin there should be on each side of the box.

It's not possible. to center an element that takes up the full width of the page. if you follow certain requirements. Take a look at the following example. for example. margin-left The margin property also lets you center content. but it doesn't. the element being styled will center in the page. . like the <body>. a width must be set for that element. Otherwise. the div in the example above should center on the page. In theory. therefore. Why? In order to center an element. margin-bottom 4. the width of the div will be automatically set to the full width of its containing element. 3. When the margin property is set to auto.

In the example above. This affects how the browser displays HTML elements. This is important to keep in mind when attempting to center nested elements. the width of the div is set to 400 pixels. which is less than the width of the page's body. Note: When margin: auto is used. If the div was contained in larger div. . the term "user agent" is a technical term for the browser. Many developers choose to reset these default values so that they can truly work with a clean slate. an element will center relative to its container. which can make it difficult for a developer to design or style a web page. In this case. CSS: DEFAULT STYLE SHEETS All major web browsers have a default stylesheet they use in the absence of an external stylesheet. For example. like divs. This will cause the div to center properly on the page. the div in the example above was centered relative to the width of the body. These default stylesheets are known as user agent stylesheets. the smaller div would center relative to the width of the larger div. User agent stylesheets often have default CSS rules that set default values for padding and margin.

2. CSS: HIDE ELEMENTS It's common to use the display property to create a navigation bar from list items.causes block-level elements (like a div) to behave like an inline element (like a link). 2. block . In CSS. without disrupting the flow of the text (like links). Inline elements . like so: . paragraphs.removes an element from view. they do not require a unit of measurement. Most of the common HTML elements are block-level elements (headings. 3. inline-block . inline .The code in the example above resets the default margin and padding values of all HTML elements. CSS: ELEMENTS: All HTML elements can be classified as one of the following: inline elements or block-level elements. The rest of the web page will act as if the element does not exist.elements that use an entire line of space in a web page and disrupt the natural flow of text. divs. and more).causes inline elements (like a link) to behave like a block element (like a div). but retain the features of a block-level element. It is often the first CSS rule in an external stylesheet. Why is this useful? Modifying the display property of an element can help achieve a desired layout for a web page.causes block-level elements to behave like an inline element. 1.elements that display inline with text. none . you can change the default behavior of elements with the display property. 4. Block-level elements . When these properties are set to 0. The display property can take on one of four values: 1. Note that both properties are both set to 0.

Elements can be hidden from view with the visibility property.displays an element. visible .hides an element. hidden . The visibility property can be set to one of the following values: 1. 2. .

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

. Under this box model. the box- sizing property controls the type of box model the browser should use when interpreting a web page. under the current box model. while the width of the box is 300 pixels. In CSS. but this property-value pair is not typically specified in a stylesheet. Many properties in CSS have a default value and don't have to be explicitly set in the stylesheet. the default font-weight of text is normal. A padding of 10 pixels has also been set on all four sides of the box's content. The same can be said about the box model that browsers assume. The 10 pixels of padding increases the height of the box to 220 pixels the width to 320 pixels. Unfortunately. 1 pixel thick borders.In the example above. the border thickness and the padding will affect the dimensions of the box. It illustrates the default box model used by the browser. The default value of this property is content-box. For example. The height of the box is 200 pixels. black. the 1 pixel thick border increases the height to 221 pixels and the width to 321 pixels. the border thickness and padding are added to the overall dimensions of the box. content-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. Study the diagram to the right. a heading element's box has solid. Next. This is the same box model that is affected by border thickness and padding.

Fortunately. . we can reset the entire box model and specify a new one: border-box. which means the overall dimensions of the box do not change. The code in the example above resets the box model to border-box for all HTML elements. 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. This new box model avoids the dimensional issues that exist in the former box model you learned about.

The border thickness and padding would remain entirely inside of the box. . the height of the box would remain at 200 pixels and the width would remain at 300 pixels.In the example above.

Summary:  In the default box model. let's actually implement it in the browser.  The value for the new box model is border-box. CSS: PAGE LAYOUT .  The border-box model is not affected by border thickness or padding.  The box-sizing property controls the box model used by the browser.Now that you know about the new box model.  The default value of the box-sizing property is content-box. box dimensions are affected by border thickness and padding.

the default value (it does not need to be specified) 2. however. The valid offset properties are: 1. the div has been positioned using two of the four offset properties. are often the result of well positioned elements. relative 3. static . Visually appealing websites. In the example above. absolute 4. you'll learn how to position HTML elements in order to gain more control of a web page's layout. bottom . In this unit.moves the element up.moves the element right.moves the element down. 2.The box model is the first step in understanding how the browser lays out HTML elements. left . fixed One way to modify the default position of an element is by setting its position property to relative. top . . The default position of an element can be changed by setting its position property. 3. This value allows you to position an element relative to its default position the web page. The positionproperty can take one of four values: 1.

ems. . 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. Unlike the relative value. The div will be pinned down to its current position. especially since other elements with ignore the div. the div will be moved down 50 pixels and to the right 75 pixels. Unfortunately. Units for offset properties can be specified pixels. right . if offset properties aren't specified. The specific offset values will depend on what makes the best sense for the content of a web page. all other elements on the page will ignore the element and act like it is not present on the page. 4. When an element's position is set to absolute. the code in the example is valid. or percentages.moves the element left. In the example above. it's possible for the div's content to overlap with other content on the page. Offset properties can be set in order to avoid this problem.

It's still possible. the div will remain fixed to its position no matter where the user scrolls on the page. One solution is to set an opaque background color for the element. In the example above. . This technique is used often for navigation bars on a web page. for content (like text) to overlap other content when using this position. We can fix an element to a specific position on the page (regardless of user scrolling) by setting its position to fixed.When an element's position is set to absolute. however. as in the last exercise. that element can still scroll out of view when a user scrolls.

When boxes on a web page have a combination of different positions. In the example above. . the boxes (and therefore. The opaque background color of the navigation div is not enough to prevent this from happening.The opaque background color will prevent any other content on the page from overlapping with any content inside of the div. making the content difficult to read or consume. their content) can overlap with each other. the description div would ignore the navigation div and overlap it as a user scrolls.

If you're simply interested in moving an element as far left or as far right as possible on the page. The float property can be set to one of two values: . you can use the floatproperty. the integers instruct the browser on the order in which elements should be displayed on the web page. Depending on their values. In the example above. Setting the z-index of navigation to a number greater than 0 is sufficient to prevent overlapping content. you've learned how to specify the exact position of an element using offset properties. So far. 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. The z-index property accepts integer values.The z-index property controls how far "back" or how far "forward" an element should appear on the web page. It's not necessary to set the z-index of the description div to 0 or anything lower than 0.

this value will move. Specifically. 2. any other content within the same containing element will naturally flow around the element. 4.this value will move elements as far right as possible. left — the left side of the element will not touch any other element within the same containing element. however. this can affect their layout on the page. Floated elements must have a width specified. none — the element can touch either side. as in the example above. 1. or float. right . elements can "bump" into each other and not allow other elements to properly move the left or or the right. When multiple floated elements have different heights. . left . 2. Otherwise. right — the right side of the element will not touch any other element within the same containing element. 3. the element will assume the full width of its containing element. both — neither side of the element will touch any other element within the same containing element. When an element is floated. The float property can also be used to float multiple elements at once. elements as far left as possible. and attempting to float the element may not yield any visible results. 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.

 You can clear an element's left or right side (or both) using the clear property. all divs on the page are floated to the left side.  The float property can move elements as far left or as far right as possible on a web page. Summary  The position property allows you to specify the position of an element in three different ways. an element's position can be pinned to any part of the web page. By setting its clear property to left. but the element will still move out of view the page is scrolled. While this technique is still valid. .  The z-index of an element specifies how far back or how far forward an element appears should appear on the page. it's possible to also add images (and style them) to a website and style them using CSS techniques. CSS: ADDING IMAGES In the very beginning of the course. The div with class special did not move all the way to the left because a taller div blocked its positioning. The aim of this unit will be to teach you how to add images to your web page by using a variety of techniques. the special div will be moved all the way to the left side of the page. we taught you how to add images to your web page using the <img>element.  When set to fixed.In the example above. an element's position can be pinned to any part of the web page. The element will remain in view no matter what. an element's position is relative to its default position on the page.  When set to absolute.  When set to relative.

. the dimensions of an image can be set with the height and width properties. the image's display property has been set to block. For images to center properly. they must behave as block-level elements.product img refers to all images within elements that have a class name of product. but first. Specifying the dimensions of an image helps the browser determine how much space should be reserved for the image. By default.As with any other element. Now the image can be aligned as a block-level element. Using dimensions for an image that exceed the original dimensions will distort the image. In the example above. Note: Images should be saved at the dimensions they will be displayed in on the web page. images are inline elements. their default behavior must be changed. Note: . Images can also be centered.

You can control how a background image repeats with the background- repeat property. creating a tiled background (this is the default behavior).contains the URL of the image. This technique can be used on nearly any HTML element. you probably noticed that the background image was repeated. the background of the body will be set to the image specified in double quotes. which automatically sets the exact amount of margin needed on the left and right sides in order to center the image. enclosed in double quotes. The background-image can be set to a value of url(). 1.In the example above. Note: To align images to the left or right side of a page. In the example above. the image is aligned using the margin property. you can use the float property you learned about earlier. url() . In the last exercise. This property can take one of four values: . Images can also be added to the backgrounds of HTML elements with the background-image property. The left and right margins are set to auto. The top and bottom margins of the image's box are set to 0 margin.

A background image is positioned using a 3 by 3 grid (three rows. center top .the center of the element's box. 1. right center . 4. center center . 6. 5. no-repeat .top center of the element's box. repeat . left top .top right corner of the element's box. 3. 3. the paragraph's background image will repeat horizontally.the default value — the image will repeat horizontally and vertically. In the example above.the background image will be repeated only along the x-axis (horizontally). 4. its position can be modified with the background-positionproperty. 2. center row. . meaning there are 9 total possible positions for the image: 1. When a background image is not repeated.top left corner of the element's box. repeat-y . repeat-x .the background image will not be repeated at all and will appear only once.right column. 2. center row. three columns). right top .left column. left center .the background image will be repeated only along the y-axis (vertically).

the background image is not repeated.bottom center of the element's box. In the last few exercises. 7. you learned how to set a background image. left bottom . center bottom . 9. we set these three properties as follows: The code in the example above can be shortened using the background property. . 8. if only one value is specified. CSS allows you to set all three properties at once using a shorthand property: background. right bottom . Previously. Note: When setting this property. It's positioned in the top right corner of the element's box. the second value will default to center.bottom right corner of the element's box. In the example above.bottom left corner of the element's box. and its position using three different properties. its repetition pattern. Note that the values are in pairs.

like background images. . and position (in that order).Note that the background property includes all of the properties that we previously styled individually: background image. which means it won't cover the full width or height of a container. This exercise will focus on two of the most common values of the background- size property:  cover . It's considered best practice to follow this order of values when setting the background property. a div) are larger than the dimensions of the image. repetition.  contain . This value is best for images that don't communicate important content to the user.expands the image as large as possible to cover the full width or height of a container. the background image will expand to cover the full size of the div. the image will become distorted. To modify a background image's size. but the image will be letterboxed. If the dimensions of the container (say.expands the image as large as possible. In the example above. you can use the background-size property.

while others use creative color gradients as their background. In this exercise. 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.this value pins the image's position on the page. It also lets you use color gradients in your web page. The colors are usually specified as hex color codes. The background-image property can be set to the following value: -webkit-linear-gradient() . we'll look at one value supported on a couple of major browsers.With the background-attachment property. fixed . Gradients are planned to be a part of the newest revision of CSS. The background-image property you learned about earlier allows you to do more than simply set the background image of an element. . there is no standard way of defining a gradient using CSS (different browsers require different syntax). In the example above.this value allows the image to move up and down as a user scrolls on the web page (this is the default value). 2. Due to the many browsers available. The background-attachment property can take one of two values: 1. Some sites use large images in their layout. scroll . 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. CSS3.this value accepts two arguments: the two colors the linear gradient will transition to and from.

. HTML: TABLES There are many websites on the Internet that display information like stock prices. repetition. invoice data. Other images are intended simply to style a web page (header backgrounds.You've learned how to add images to a web page using the <img> element and the background property. When an image is intended to style a web page. not to communicate important information.  The background-image also supports color gradients. etc.  The position of a non-repeating image can be controlled using the background-positionproperty. and it's position. etc.  A background image can be added to any element using the background-image property. logos. Summary  Image dimensions are set using the width and height properties. When an image communicates important information. sports scores. This data is naturally tabular in nature. meaning that a table is often the best way of presenting the days. you can use the <img> element and style the image using CSS. album photos. 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. you can use the background property and further style it with CSS.  A background image's repetition is controlled with the background-repeat property. if needed. and more.  The background property is a shorthand way of setting an image.) and they communicate important information to a user. Some images are part of the content of a web page (icons.).

Rows aren't sufficient to add data to a table. Each cell element must also be defined.Before displaying data. . In the example above. columns. you can add data using the table data element: <td>. two rows have been added to the table. In HTML. In HTML. The <table> element will contain all of the tabular data you plan on displaying. meaning that it contains the rows. you must first create the table that will contain the data by using the <table>element. the table is already predefined for you. In many programs that use tables. The first step in entering data into the table is to add rows using the table row element: <tr>. and cells that will hold data. all of these components must be created.

Table data doesn't make much sense without titles to describe what the data represents. By adding two data points. Just like table data. we created two cells of data.In the example above. except with a relevant title. a table heading must be placed within a table row. The table heading element is used just like a table data element. If the table were displayed in the browser. you can use the table heading element: <th>. it would show a table with one row and two columns. . two data points (73 and 81) were entered in the one row that exists. To add titles to rows and columns.

and a Sunday heading. a new row was added to hold the three headings: a blank heading. the tables you've created have been a little difficult to read because they have no borders.this value makes it clear that the heading is for a row. The blank heading creates the extra table cell necessary to align the table headings correctly over the data they correspond to. the use of the scope attribute.this value makes it clear that the heading is for a column. also. one table heading was added as a row title: Temperature. which can take one of two values:  row . In the second row.What happened in the code above? First. Note. a Saturday heading. .  col . So far.

. It's meant to illustrate older conventions you may come across when reading other developers' code. so please don't use it. The code in the example above uses CSS instead of HTML to show table borders. The browser will likely still interpret your code correct if you use the border attribute. The code in the example above is following is deprecated. Instead.In older versions of HTML. you can achieve the same effect using CSS. This integer would represent the thickness of the border. a border could be added to a table using the border attribute and setting it equal to an integer. but that doesn't mean the attribute should be used.

.

or even multiple days. The attributes accepts an integer (greater than or equal to 1) to denote the number of columns it spans across.What if the table contains data that spans multiple columns? For example. . Data can span columns using the colspan attribute. a personal calendar could have events that span across multiple hours.

In the example above. Data can also span multiple rows using the rowspanattribute. It accepts an integer (greater than or equal to 1) to denote the number of rows it spans across. The data Back in Townappear only under the Wednesday heading. the data Out of Town spans the Monday and Tuesday table headings using the value 2 (two columns). . The rowspan attribute is used for data that spans multiple rows (perhaps an event goes on for multiple hours on a certain day).

which spans two rows under the Saturday column. along with Work. there are four rows: 1. The third row only contains the Afternoon row heading. 4. 3. The second row contains the Morning row heading. since "Relax" spans into the cell next to it. The "Relax" entry spans three rows under the Sunday column. The first row contains an empty cell and the two column headings. The fourth row only contains the Dinner entry.In the example above. 2. .

Long tables can be sectioned off using the table body element: <tbody>. a table can grow to contain a lot of data and become very long. the table can be sectioned off so that it is easier to manage. excluding the table headings (more on this in a later exercise).Over time. . The <tbody> element should contain the all of the table's data. When this happens.

. Note. all of the table data is contained within a table body element. the table's headings were kept inside of the table's body. however. however.In the example above. that the headings were also kept in the table's body — we'll change this in the next exercise. When a table's body is sectioned off. it also makes sense to section off the table's headings using the <thead> element. In the last exercise.

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.

selector: specifies exactly which HTML elements to style. However. 3. link is self-closing. properties and values: located inside the { }brackets.css is an external style sheet. main. 1. we can use class selectors to target classes of HTML elements.-href: Provides the URL of the file being linked to. properties and values specify what aspect of the selector to style. 2. It does not need a closing tag. } .header { color: #ffffff. as seen below: . rule: a list of CSS instructions for how to style a specific HTML element or group of HTML elements. Here's a refresher on parent and child elements. Up to this point. CSS styles applied to the headerclass selector will automatically apply to the h2 and the p. Consider the HTML below: <div class="header"> <h2>Heading</h2> <p>Paragraph</p> </div> Here. which will display all h1 elements in red. the color property is set to red. the div is the parent element and the h2 and p are children. we've used CSS to select an HTML element by its tag name only. The diagram to the right shows the anatomy of a CSS rule: 1. class selectors can be identified by a dot .followed by the class name. In CSS.  Like the HTML image element. In the diagram's example. Here h1 is the selector. Inline CSS is another method. Using external stylesheets is one of the most popular ways to write CSS. In the example above.

but all other elements of that kind to be styled a different way? For example. } About using id: 1. If an HTML element is using both id and class attributes. child elements of divs with the header class will have a font color of #ffffff(white). to style one anchor element differently than all the others on a webpage.As a result of this code. Below. Ids have greater specificity than classes. you would create a rule for the id selector. Below we will use an id selector to style a single HTML element differently than others of that kind on the webpage.codecademy. What if a webpage design calls for an individual page element to be styled uniquely. An id attribute can only be used once because the id is unique to the element it is assigned to. A previous exercise introduced CSS class selectors to style HTML elements of specific classes. we will use a CSS class selector to style more than one HTML element at once. 2. using a # symbol: #learn-code { color: #2e69a3.com">Click here to learn to code!</a> Then in the CSS file. the CSS rule for the id will take precedence over that of the class. you could use the HTML id attribute: <a id="learn-code" href="https://www. .

.

.CSS: Boundaries & SPACE Observe the CSS box model diagram to the right: 1. or other media contained within an HTML element. images. content: Includes text.

The diagram to the right illustrates the block and inline display types. In the diagram. DISPLAY Not all HTML elements are displayed on a page in the same way. 3. . margin: The space between the HTML page element and the next nearest element(s). then click Next to continue. 4. You can think of this like inner space. notice: 1. HTML image and anchor elements are displayed inline: they appear on the same line as their neighboring elements on the webpage. You can think of it like a picture frame that contains the element. paragraph. padding: The space between the content and the border. 2. padding. Familiarize yourself with block and inline display types. 2. HTML heading. border: The outline of an HTML page element. The two dotted rectangles represent webpages. Display types determine how HTML elements will be arranged in relation to each other. Using borders. and margins allows us to control boundaries and space for individual HTML elements. 3. 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. and unordered list elements are block level: each appears on its own line on the webpage.

which are normally displayed as block-level elements. Click Run and notice the change in the web browser. we can make list items appear on the same line by setting display to inline: On the Tundra Gallery homepage. Read through the HTML and locate this code.css locate the nav li selector. display inline within the navigation. .html. List items.Display types can be overwritten in CSS by using the display property. For example. this is represented by a navelement containing a ul with three list items. In index. In main. notice the navigation bar (navbar) on the bottom left. Give it a display property of inline.

parent { display: flex. It would be even better if we could get the Contact button to fill in the empty corner on the bottom right.. . flex-wrap: wrap. In the web browser. In addition to other capabilities. the gallery images that were arranged neatly in rows are now stacked on the left side of the webpage. flex.Nice work! The navbar is starting to come together nicely. we have the option of floating elements left or right.css.. Consider the example code below. locate the class selector . The CSS display value that arranged the images. and the id selector #search-bar floats right: In main. to center rows of children elements. we can use the CSS float property.parent { display: flex. } .parent { display: flex. flex-wrap: wrap.contact-btn and assign it float: right. The class selector. In the example code below.: . has been removed. there is a div with class parent: <div class="parent"> . </div> To make children of the div align horizontally on the webpage. } Finally.: . justify-content: center.logo. floats left. By using float. flex can be used to easily align multiple page elements horizontally. in CSS we can use: . we can use justify-content: center. } 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. To achieve this..

.

which is the selector for anchor elements that have a parent with the "contact-btn" class. } Next. One useful value for this property is relative. . 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.CSS: POSITION The CSS position property enables you to position HTML elements in exact locations on a webpage. locate . which we use to style an element only while it's being clicked. bottom.contact-btn a selector. In main. . Add the following CSS to the .. simulating a real-life button being pushed. left: 20px. top: 10px.contact-btn a { position: relative. This value positions page elements on a webpage relative to where they would normally appear. Beneath the properties already listed for the . add: . locate the . and right to shift an element away from where it would have normally appeared on the page.contact-btn a:active selector: top: 2px.contact-btn a:activeselector. } 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. you can then use the CSS properties top. This will cause the Contact button to move down slightly while being clicked. left.container { position: relative.contact-btn a. :active is a psuedo-class selector. By first setting position: relative.css.

we will encounter three new HTML elements: 1.  padding: sets the amount of space between an element's content and its border. . 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. 2.  inline: display value used to arrange HTML elements on the same line as neighboring elements. Also in this lesson.  margin: sets the amount of space between an HTML element and the next nearest element(s). footer: Used to organize footers on a webpage.Summary: WEB CONCEPTS  CSS Box Model: illustrates the space and boundary properties of an HTML element that can be controlled using CSS. In this lesson.  position: property used to position HTML elements in exact locations on a webpage. we will build this webpage up from scratch using a combination of Bootstrap and custom CSS.  display: property that determines how the selected element will be arranged in relation to other HTML elements on the page. CSS SKILLS  border: sets the outline of an HTML page element. like a picture frame that contains the element.  float: property used to float HTML elements left or right of neighboring elements. header: Used to organize headers on a webpage.  flex: display value that allows us to easily align multiple page elements vertically or horizontally.

6/css/bootstrap.. The HTML link element makes Bootstrap available to us.. section: Defines sections on a webpage. In earlier lessons.css. </head> One of the reasons Bootstrap and frameworks like it are so popular is because they offer grids. as seen in the diagram on the right.3. you can customize responsive page layouts quickly and reliably.min. we linked only to main.css"/> . HTML elements are arranged to span different numbers of columns in order to create custom page layouts. <link rel="stylesheet" href="https://maxcdn. in addition to main. .bootstrapcdn. Before Bootstrap can work for us.com/bootstrap/3. A grid makes it possible to organize HTML elements using preconfigured columns. Using a grid..css. <head> . Remember that the link element is typically contained within HTML head tags. we will link to a URL that hosts Bootstrap. 3.. we need to link to it. The Bootstrap grid contains 12 equal-sized columns. Now.

. Elements labeled "col-sm-3" take up three grid columns. The element with class "jumbotron" spans the entire width of the webpage. "col-sm-6" and "col-sm-3" refer to Bootstrap classes. Elements inside the second "container". Bootstrap's grid columns are represented by 12 vertical bars. 4. 5.In the diagram. The words "container". 3. 2. elements labeled "col-sm- 6" take up six grid columns. such as "col-sm-6" and "col-sm-3" are contained within the grid columns. "jumbotron". beyond the borders of the grid. observe the following: 1. The boxes represent HTML elements.

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

Bootstrap refers to this as a jumbotron. Below is an example implementation of a jumbotron. First. many websites have a large showcase area featuring important content.In addition to a header/navigation. 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 . such as h2. add heading and anchor elements to the row. The anchor element will have Bootstrap's btn btn-primary class. p or anchor elements.. which will transform it into a button. //todo inside header en html Finally.. is a placeholder for HTML elements containing text. BOOTSTRAP: CONTENT AREA .

an HTML section element with the containerclass is used: Next. Supporting content can be arranged using Bootstrap's grid.. Below is an example implementation of a supporting content area.Many websites have a supporting content area. class.. . div elements with the row class are added: Finally. First. the rows are divided by using divs with Bootstrap's col-sm-.

Above. BOOTSTRAP: FOOTER Footers display copyright information. Each part takes up 6 of bootstrap's 12 columns. On narrower screens. two rows are divided into two equal parts. Below is one possible implementation for a footer section using Bootstrap: First. a footer element with Bootstrap's containerclass is used: . social media links and sometimes site navigation. 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). only one image per row will appear. such as an iPhone.

Screen sizes smaller than tablet-width (768 pixels). a div with Bootstrap's row class is added to hold footer content: Finally.Inside the footer. a ul which takes up 8 columns. The lis could hold navigation menu items or social media icons. because the col-sm-. the row is divided into parts using Bootstrap's grid. class is used. Here is one suggestion: Above. this layout will appear on tablet- width screens and wider. Again. will not maintain this layout. .. the row is broken into three parts: a p element that takes up four columns.. and li items which take up 1 column each.

.

.

 Bootstrap Grid: 12 equal-sized columns which can be utilized via Bootstrap classes to build responsive page layouts quickly and reliably. BOOTSTRAP CLASSES .BOOTSTRAP SUMMARY WEB CONCEPTS  CSS Framework: Set of prewritten CSS rules designed to help you build webpages faster.

 jumbotron: Used to create large showcase sections featuring important content. Javascript is a programming language whereas jQuery is a framework to help make writing in javascript easier. The "sm" is short for "small". main feature sections. HTML: structure/skeleton CSS: styling JAVASCRIPT: interaction CODEPEN SHORTCUTS . NOTES: Bootstrap is a framework Bootstrap + code pen https://www.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. and maintains desired CSS layouts on small screens (tablet-sized). and can be useful when building headers/navigation menus.  col-sm-*: Used to span a specified number of columns on the Bootstrap grid.  btn btn-primary: Bootstrap class used to style page elements as buttons.  text-right: Bootstrap class used to orient text to the right side of the webpage.  row: Arranges HTML elements in rows.youtube. supporting content sections and footers.

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

com/watch?v=5GcQtLDGXy8 Principles of Programming: https://www. typically consisting of a code editor.org BOOTSTRAP Bootstrap is a code front-end framework for html/css/javascript https://www. a compiler. from interactive tools to data visualization or sensor-driven applications.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. For professionals Processing is a Java framework providing support for a wide range of creative code activities.youtube. new media art.youtube.com/watch?v=lJnvq0A_7WQ . a debugger. and visual design communities with the purpose of teaching the fundamentals of computer programming in a visual context. and a graphical user interface (GUI) builder. https://processing. http://brackets. and to serve as the foundation for electronic sketchbooks.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.

API & SDKs  API (application programming interfaces) Used to connect programs together (ex: extract data from twitter to display somewhere else (or vice versa)). Integers (integer operations give an integer. 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).youtube. First figure out what you want to do and then choose the language that is best suitable to do that.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.round down) .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.  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.

float result) 3. Array/list (array collection of data types) 5. Float (numbers with decimal precision.youtube.word) 4.com/watch?v=3JluqTojuME code tutorials: https://www.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> . Characters/string (character a single character/ string a collection. 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. 2.

</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 .html o page2. 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. El link puede ser ex: index.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.html .

a ?  id and classes?? En html??  Nav ul vs ul? Nav se puede poner y ya? https://www. }  en css cual es la diferencia de un selector a vs .youtube.CSS *works with a selector and a rule applied to the selector ex: Body { color: red.com/watch?v=9tzyJEwO9Os BASICS I NEED .

.

When you ask your browser for a web page. and Opera.com/watch?v=sBzRwzY7G-k HTML & CSS BOOK: http://www. Web servers are special computers that are constantly connected to the Internet. Popular examples include Firefox.htmlandcssbook.FRAMEWORKS CSS/HTML: BOOTSTRAP JVSCRIPT: REACT LEARN GIT + GITHUB https://www.com/code-samples/ People access websites using software called a web browser.youtube. Internet Explorer. Chrome. Safari. the request is sent across the Internet to a special computer known as a web server which hosts the website. and are optimized to send web pages .

You type a domain name or web address into your browser to visit a site. When you visit a website.Net.out to people who request them. Screen readers are programs that read out the contents of a computer screen to a user.com. you do so via an Internet Service Provider (ISP).uk. it is most likely that your browser will be receiving HTML and CSS from the web server that hosts the site. but you do not need to know these technologies to improve what the user sees. blogging software. When you connect to the web. but it is more common to use the services of a web hosting company who charge a fee to host your site. The web browser interprets the HTML and CSS code to create the page that you see. microsoft. and e-commerce platforms often add a few more technologies into the mix. but content management systems. Larger. bbc. your browser will first connect to a Domain Name System (DNS) server. In order for you to find the location of the web server. Some big companies run their own web servers. ASP. the web server hosting that site could be anywhere in the world. The skills you'll learn in this book should be enough to help you on that road. All websites use HTML and CSS. and programming languages such as PHP. They are commonly used by people with visual impairments. or Ruby on the web server. When you are looking at a website. more complex sites like these may use a database to store data. for example: google. Java. The unique number that the DNS server returns to your computer allows your browser to contact the web server .com.co.

that hosts the website you requested. An IP address is a number of up to 12 digits separated by periods / full stops. A web server is a computer that is constantly connected to the web. The web server then sends the page you requested back to your web browser. Every device connected to the web has a unique IP address. These act like phone books. they tell your computer the IP address associated with the requested domain name. 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 . and is set up especially to send web pages to users. Your computer contacts a network of servers called Domain Name System (DNS) servers. it is like the phone number for that computer.

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

//practicar Dreamweaver???// .

.

.

.

.

.

can use this extra . 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.SEMANTIC MARKUP There are some text elements that are not intended to affect the structure of your web pages. such as screen readers or search engines.

For example. the voice of a screen reader may add emphasis to the words inside the <em> element.information. to be an outstanding achievement. and all the other scientific journals her work had appeared in. unraveling the secrets of the llama <abbr title="Deoxyribonucleic acid">DNA</abbr>. Semantic information is carried in elements such as <cite> and <em>. <i>New Scientist</i>. 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>. Molly <em>did</em> think she had something better to do. Although many considered her pioneering work. and <p>. was a well thumbed copy of <cite>On The Road</cite>. This is a very simple HTML page that demonstrates text markup. <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. <h2>. Structural markup includes elements such as <h1>. It had been Molly's favorite book since college. or a search engine might register that your page features a quote if you use the <blockquote> element. lying between the copies of <i>Nature</i>.</p> </body> </html> . 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. On her desk.

.

.

.

.

.

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 .

<html> <head> <title>Lists</title> </head> <body> <h1>Scrambled Eggs</h1> <p>Eggs are one of my favourite foods. or a legal contract where each point needs to be identified by a section number.</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> . ●● Definition lists are made up of a set of terms along with the definitions for each of those terms. Here is a recipe for deliciously rich scrambled eggs.a recipe that must be performed in order. ●● Unordered lists are lists that begin with a bullet point (rather than characters that indicate order).

.

.

.

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 .

Clear link text can help visitors find what they want. Users can click on anything between the opening <a> tag and the closing </a> tag.one web page to another — enabling the very idea of browsing or surfing. This will give them a more positive impression of your site and may encourage them to visit it for longer. (For example. you can think of words people might use when searching for the page that you are linking to. rather than write . 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. Many people navigate websites by scanning the text for links. You specify which page you want to link to using the href attribute. (It also helps people using screen reader software.) To write good link text.

") ."places to stay" you could use something more specific such as "hotels in New York.

Folders on a website are sometimes referred to as directories.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. .

blogging software. these systems often use one template file for each different type of page (such as news articles. . blog posts. or products). you might not have individual files for each page of the website. or an e-commerce system. Do not change any code that is not HTML or you may break the page.If you are working with a content management system. Editing the template file would change all of the pages that use that template. Instead.

you do not need to specify the domain name.RELATIVE URLS: Relative URLs can be used when linking to pages within your own website. 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 . You can use relative URLs which are a shorthand way to tell the browser where a page is in relation to the current page. 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.

. If all of the files in your site are in one folder. If your site is organized into separate folders (or directories). If you link to the same page from two different pages you might. you simply use the file name for that page. need to write two different relative URLs. you need to tell the browser how to get from the page it is currently on to the page that you are linking to. These links make use of the same terminology (borrowed from that of family trees) you met on the previous page which introduces directory structure.uploaded them to the web). therefore.

.

.

.

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 .

On a big site you might like to add subfolders inside the images folder. there are usually tools built into the admin site that allow you to upload images. product photographs might sit in a page called products. all of the images are stored in a folder called images. As a website grows. keeping images in a separate folder helps you understand how the site is organized. it is good practice to create a folder for all of the images the site uses. . and the program will probably already have a separate folder for image files and any other uploads. Here you can see an example of the files for a website. If you are using a content management system or blogging platform. and images related to news might live in a folder called news. images such as logos and buttons might sit in a folder called interface.●● 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. For example.

.

.

.

.

.

.

Whenever you have many different colors in a picture you should use a JPEG. 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 . 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.

Logos.) 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. they are made up of many subtly different shades of the same color and are not as suited to GIF or PNG format. the larger the size of the file. Images in print materials (such as books and magazines) are made up of tiny circles called dots. They are made up of lots of miniature squares. (Note that photographs of snow. sky. or grass are not flat colors. and PNGs belong to a type of image format known as bitmap. These images are usually printed at a resolution of 300 dots per inch (dpi). GIFs. . illustrations. and diagrams often use flat colors.with exactly the same color. The higher the resolution of the image. The resolution of an image is the number of squares that fit within a 1 inch x 1 inch square area. JPGs. Images created for the web should be saved at a resolution of 72 ppi. The web browsers on most desktop computers display images at a resolution of 72 pixels per inch (ppi). it is known as flat color.

Vector images are commonly created in programs such as Adobe Illustrator. animated GIFs are really only suitable for simple illustrations. however its use is not yet widespread. 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). 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. Because GIFs are not an ideal format for displaying photographs. 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).Vector images differ from bitmap images and are resolution-independent. Some image editing applications such as Adobe Photoshop allow you to create animated GIFs. Animated GIFs show several frames of an image in sequence and therefore can be used to create simple animations. The current method of using vector images for display on websites involves saving a bitmap version of the original vector image and using that. Each extra frame of the image increases the size of the file. .

.

you need to think in terms of a grid made up of rows and columns (a bit like a spreadsheet). train timetables. For example: sports results.CHAPTER 6: TABLES There are several types of information that need to be displayed in a grid or table. stock reports. When representing information in a table. 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 .

.

.

.

.

HTML borrows the concept of a form to refer to different elements that allow you to collect information from visitors to your site. HTML forms give you a set of elements to collect data from .CHAPTER 7: FORMS Traditionally. Whether you are adding a simple search box to your website or you need to create more complicated insurance applications. the term 'form' has referred to a printed document that contains spaces for you to fill in information.

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 .your users.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

meta information and iframes .CHAPTER 8: EXTRA MARKUP  Specifying d XX ifferent versions of HTML  Identifying and grouping elements  Comments.

.

.

.

.

.

.

.

.

.

.

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.CHAPTER 9: FLASH. We then focus on how to add video and audio to your site. and audio to websites. video. This chapter begins by looking at how to use it in your web pages. using either the new HTML5 <video> and <audio> elements .

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 most popular way of adding Flash into a web page is using JavaScript. the files you put on your website are referred to as Flash movies. browsers need to use a plugin (an extra piece of software that runs in the browser) called the Flash Player. To view Flash. there are two key issues to understand: file formats and video players/plugins.or a hosted service (such as YouTube or SoundCloud). . To add video to your site. There are several scripts that allow you to do this without an in-depth understanding of the JavaScript language. 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. .

.

This example uses two documents: the HTML file (example. . The fifth line of HTML uses the <link> element to indicate where the CSS file is located.html) and a separate CSS file (example.Here you can see a simple web page that is styled using CSS.css).

.

.

.

.

Why use External Style Sheets? .

org CrossBrowserTesting.Adobe.com BrowserShots. as there are online tools to show you what a page looks like in multiple browsers: BrowserCam.You do not need lots of computers to test your site.com BrowserLab.com If you come across a CSS bug. you can use your favorite search .

org CHAPTER 11: COLOR  How to specify colors  Color terminology and contrast  Background color COLOR CONTRAST TOOL: www.engine to try and find a solution. Or you can check these sites: PositionIsEverything.net QuirksMode.html .snook.ca/technical/colour_contrast/colour.

.

.

.

.

and letters The properties that allow you to control the appearance of text can be split into . words. underlines  XX Spacing between lines. italics. capitals.CHAPTER 12: TEXT  XX Size and typeface of text  XX Bold.

whether it is regular. 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. then it should look fine 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. bold or italic.two groups: Those that directly affect t ●● he font and its appearance (including the typeface.

. 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.The default size of text in a browser is 16 pixels. So if you use percentages or ems.

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.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.

.

.

.

.

. you saw how CSS treats each HTML element as if it lives in its own box. margin and padding  XX Displaying and hiding boxes At the beginning of this section on CSS.CHAPTER 13: BOXES  XX Controlling size of boxes  XX Box model for borders.

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 .You can set several properties that affect the appearance of these 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. ●● Discover how various devices have different screen sizes and resolution. This involves learning about how designing for a screen can be different to designing for other mediums (such as print). and how they are created. In this chapter we will: Explore different ways to position e lements using normal flow. ●● Find out how designers use grids to make their page designs look more professional. . and how this affects the design process. relative positioning. absolute positioning and floats. ●● Learn the difference between fixed width and liquid layouts.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

so your design needs to be able to .SCREEN SIZES Different visitors to your site will have different sized screens that show different amounts of information.

Resolution refers to the number of dots a screen shows per inch. The area of the page that users would see without scrolling was often referred as being “above the fold” (a term newspapers . Many mobile devices have screens that are higher resolution than their desktop counterparts. It is interesting to note that the higher the resolution. the smaller the text appears.work on a range of different sized screens. Some devices have a higher resolution than desktop computers and most operating systems allow users to adjust the resolution of their screens. 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). PAGE SIZES Because screen sizes and display resolutions vary so much.

. As a result.had originally coined to describe the area of the front page you would see if the paper were folded in half). But do not try to cram too much into that top area. 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 well as hint at more content below this point. many designs still try to let the user know what the site is about within the top 570- 600 pixels.

.

.

.

.

.

.

and the same is true for web designers.LAYOUT GRIDS Composition in any visual art (such as design. or photography) is the placement or arrangement of visual elements — how they are organized on a page. painting. you can see a set of thick vertical lines superimposed over the top of a newspaper . On the right. Many designers use a grid structure to help them position items on a page.

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> .

.

such as creating layout grids. styling forms.CSS FRAMEWORKS CSS frameworks aim to make your life easier by providing the code for common tasks. You can include the CSS . creating printer-friendly versions of pages and so on.

There are different classes for blocks that take up 1. Responsive Layout framework: https://unsemantic. such as those at: blueprintcss. 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.com developer.yahoo.com/yui/ . 3.com/ To create a 12 column grid. Each block uses class names such as grid_3 (for a block that stretches over three columns). There are several other gridbased CSS frameworks available online. 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). and up to 12 columns of the grid. and there is a 10 pixel margin to the left and the right of each one.org lessframework.framework code in your projects rather than writing the CSS from scratch. 2. These columns all float to the left. 4.

grids/ .

.

.

.

.

.

.

In this chapter you will learn how to: Specify the size and a lignment of an image using .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.

●● 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 .

.

Program a set of steps to happen 4.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. Specify scenarios and triggers HTML: attributes CSS: Properties (both have name: value structure) 2 type of elements: .

self closing 2.} . non self closing HTML value usually inside “” ex: <p attribute name= “value” </p> CSS Selector{ property name: property value. 1.