Web Coding and Development for Dummies

¡Supera tus tareas y exámenes ahora con Quizwiz!

Web Page Family

(See image) -With this structure in mind, you can now identify and define four useful members of the web page family tree: 1) Parent: An element that contains one or more other elements in the level below it. For example, in Figure 2-7, the <html> tag is the parent of the <head> and <body> tags, whereas the <head> tag is the parent of the <title> and <style> tags. 2) Child: An element that is contained within another element that sits one level above it in the tree. (Which is another way of saying that the element has a parent.) In Figure 2-7, the <header>, <nav>, <main>, and <footer> tags are children of the <body> tag, whereas the two <section> tags and the <aside> tag are children of the <article> tag. 3) Ancestor: An element that contains one or more levels of elements. In Figure 2-7, the <body> tag is an ancestor of the <aside> tag, whereas the <html> tag is an ancestor of everything in the page. 4) Descendant: An element that is contained within another element that sits one or more levels above it in the tree. In Figure 2-7, the <section> tags are descendants of the <main> tag, whereas the <article> tag is a descendant of the <body> tag. - This no doubt seems far removed from web development, but these ideas play a crucial role not only in CSS, but also JavaScript (see Book 3) and jQuery (see Book 4).

Examples of structure tags:

- "header" and "nav": <body> .....<header> ..........<img src="iis-logo.png" alt="Isn't it Semantic? company logo"> ..........<h1>Welcome to "Isn't it Semantic?"</h1> ..........<hr> .....</header> .....<nav> ..........<a href="/">Home</a> ..........<a href="semantics.html">Semantics</a> ..........<a href="contact.html">Contact</a> ..........<a href="about.html">About</a> .....</nav> </body> - "main": <body> .....<header> ..................... .....</header> .....<nav> ...................... .....</nav> .....<main> ..........Main content goes here .....</main> .......................... </body> - "article": body> .....<header> ................ .....</header> .....<nav> ................. .....</nav> .....<main> ..........<article> ...............Article content goes here ..........</article> .....</main> .............................. </body> - "section": <main> .....<article> ..........<section> ...............Section 1 heading goes here ...............Section 1 text goes here ..........</section> ..........<section> ...............Section 2 heading goes here ...............Section 2 text goes here ..........</section> ................................. .....</article> </main> - "aside": <body> .....<header> ........................................ .....</header> .....<nav> ......................... .....</nav> .....<main> ..........<article> ........................................ ..........</article> ..........<aside> ........................................ ..........</aside> .....</main> ........................................ </body> - "footer": <body> .....<header> ...................................... .....</header> .....<nav> ...................................... .....</nav> .....<main> ..........<article> ...................................... ..........</article> ..........<aside> ...................................... ..........</aside> .....</main> .....<footer> ...................................... .....</footer> </body

Handling non-semantic content with <div>

- (The <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> elements create meaningful structures within your page, which is why HTML nerds call these semantic elements). - What's a would-be web weaver to do when she wants to add a chunk of content that just doesn't fit any of the standard semantic tags? That happens a lot, and the solution is to slap that content inside a <div> (for "division") element. The <div> tag is a generic container that doesn't represent anything meaningful. - The browser renders the <div> elements on separate lines

Adding structure to the body section using HTML's high-level structure tagsa:

- <header></header> [web page header; usually seen right after the body tag] - <nav></nav> [defines a page section that includes a few elements that help visitors navigate your site; typically appears right after the header] - <main></main> [sets up a section to hold the content that is, in a sense, the point of the page; usually comes right after the <head> and <nav> sections] - <article></article> [create a page section that contains a complete composition of some sort: a blog post, an essay, a poem, a review, a diatribe, or a jeremiad. In most cases, you'll have a single <article> tag nested inside your page's <main> section, yet you can have more than one] - <section></section> [indicates a major part of page: usually a heading tag followed by some text. If you'd want a particular part of your page to be included in that table of contents, then it's major enough to merit the <section> tag. Most of the time, your <section> tags will appear within an <article> tag] - <aside></aside> [Used to cordon off a bit of the page for content that, although important or relevant for the site as a whole, is at best tangentially related to the page's <main> content. The <aside> is often a sidebar that includes site news or links to recent content, but it might also include links to other site pages that are related to current page; it most often appears within the <main> area, but after the <article> content.] <footer></footer> [create a page footer; it is usually seen right before the </body> tag]

Some tags with semantic significance

- <strong> -> important texxt - <b> -> keywords - <em> -> emphasis - <i> -> alternative text

Class selector

- A class selector is one that targets its styles at a particular web page class. - A class is an attribute assigned to one or more page tags that enables you to create a kind of grouping for those tags - syntax for adding a class to an element: <element class="class-name"> Replace element with the tag and replace class-name with the name you want to assign. The name must begin with a letter and the rest can be any combination of letters, numbers, hyphens (-), and underscores (_). [<div class="caption">] - Select those classes using CSS by preceding the class name with a dot (.) in your style rule: .class-name { .....property1: value1; .....property2: value2; ... ... ... ... ... ... }

Indenting a paragraph's first line

- A common indent value is 1em

A local web development environment (which allows you to forgo of a web hosting service or of an internet connection) is a collection of software that include:

- A web server - A relational database management system (RDBMS) to run on the web server - A server-side programming language - An interface for controlling (starting, stopping, and so on) the web server - An interface for accessing and manipulating the RDBMS

You cannot use just any old image on a a web page; there are 3 main types of image formats you can use (GIF, JPEG PNG)

- GIF: The original web graphics format (it's short for Graphics Interchange Format). GIF is limited to 256 colors, so it's best for simple images like line art, clip art, text, and so on. GIFs are also useful for creating simple animations. - JPEG: Gets its name from the Joint Photographic Experts Group that invented it. JPEG supports complex images that have many millions of colors. The main advantage of JPEG files is that, given the same image, they're smaller than GIFs, so they take less time to download. Careful, though: JPEG uses lossy compression, which means that it makes the image smaller by discarding redundant pixels. The greater the compression, the more pixels that are discarded, and the less sharp the image will appear. That said, if you have a photo or similarly complex image, JPEG is almost always the best choice because it gives the smallest file size. PNG: The Portable Network Graphics format supports millions of colors. PNG is a compressed format, but unlike JPEGs, PNGs use lossless compression. This means images retain sharpness, but the file sizes can get quite big. If you have an illustration or icon that uses solid colors, or a photo that contains large areas of near-solid color, PNG is a good choice. PNG also supports transparency.

To run special characters on Windows, taking advantage of the "<meta charset="utf-8">" tag, you have 2 options:

- Hold down the Alt key and then press the character's four-digit ASCII code using your keyboard's numeric keypad. For example, you type an em dash (—) by pressing Alt+0151. - Paste the character from the Character Map application that comes with Windows.

Two reasons that require you to have a local web development environment.

- If you're building a website or app for someone else and you don't have access to their web server. - If you're building a new version of an existing website or app, which means that you don't want to mess with the production code while tinkering (and therefore making mistakes) with the new code

Building Borders

- Modern web design eschews vertical and horizontal lines as a means of separating content, preferring, instead, to let copious amounts of whitespace do the job. However, that doesn't mean you should never use lines in your designs, particularly borders. element { .....border-top: top-width top-style top-color; .....border-right: right-width right-style right-color; .....border-bottom: bottom-width bottom-style bottom-color; .....border-left: left-width left-style left-color; } - Each border requires three values: 1) Width: The thickness of the border line, which you specify using a number followed by a CSS measurement unit: px, em, rem, vw, or vh. Note, however, that most border widths are measured in pixels, usually 1px. You can also specify one of the following keywords: thin, medium, or thick. 2) Style: The type of border line, which must be one of the following keywords: dotted, dashed, solid, double, groove, ridge, inset, or outset. 3) Color: The color of the border line. - If you want to add a full border around an element and you want all four sides to use the same width, style, and color, CSS mercifully offers a shorthand version that uses the border property: border: width style color;

General syntax to format

- Style rule: element { .....property: value; } - the "element" refers often to a tag name, yet CSS has a powerful toolbox of ways things can be referenced - CSS declaration: property "name" is followed by a colon (:), a space for readability, the "value" you want to assign to the property, and then a semicolon (;). - Always enter the property "name" using lowercase letters. If the "value" includes any characters other than letters or a hyphen, then you need to surround the value with quotation marks. - Style rules aren't restricted to just a single declaration: You're free to add as many as you need. - The declaration block — that is, the part of the rule within the braces ({ and }) — is most easily read if you indent the declarations with a tab or with either two or four spaces. - The order of the declarations isn't crucial

Like bulleted lists, numbered lists use two types of tags:

- The entire list is surrounded by the <ol> and </ol> tags. - Each item in the list is surrounded by <li> and </li>.

Bulleted lists use two types of tags:

- The entire list is surrounded by the <ul></ul> tags. - Each item in the list is preceded by the <li> (list item) tag and is closed with the </li> end tag.

Styling links

- When you add a link to the page, the web browser displays the link text in a different color (usually blue) and underlined - You can apply any text style to a link, including changing the font size, the typeface, adding bold or italics, and changing the color

Floating Elements (1-3)

- When you float an element, the web browser takes the element out of the default page flow. » Float left: The browser places the element as far to the left and as high as possible within the element's parent container. » Float right: The browser places the element as far to the right and as high as possible within the element's parent container. In both cases, the non-floated elements flow around the floated element. - "float" property: element { .....float: left|right|none; }

Applying a single style to multiple elements

- You list all the elements that you want to style at the beginning of the rule, separated by commas: header, aside, footer { .....background-color: yellow; }

To create a "hypertable of contents", with internal links that when you click them they do not take you to a different web page, but rather they take you a certain section of the web page (as in a book)

- You use id's to mark the anchor (where you want them to go) -<element id="name"> in the section of the web page where you want them to go -<a href="#name"> where you want the link to be [you create a regular <a> tag, but the href value becomes the name of the anchor, preceded by a hash symbol (#)] - You can also do this to link to a certain section of another web page [add the appropriate anchor to the other page and then link to it by adding the anchor's name (preceded, as usual, by #) to the end of the page's filename]

What is a style, and what are its advantages?

- a style is a combination of two or more formatting options rolled into one nice, neat package. - In a web page, a style enables you to define a series of formatting options for a given page element - Web page styles offer two main advantages: 1) They save time because you create the definition of the style's formatting once, and the browser applies that formatting each time you use the corresponding page element. 2) They make your pages easier to modify because all you need to do is edit the style definition and all the places where the style is used within the page get updated automatically.

- used to designate a passage of text as a quotation - web browser renders the text in its own paragraph that it also indents slightly from the left margin

Order of books

1) Book 1: Getting Ready to Code for the Web 2) Coding the Front End, Part 1: HTML & CSS 3) Coding the Front End, Part 2: JavaScript 4) Coding the Front End, Part 3: jQuery 5) Coding the Back End: PHP and MySQL 6) Coding Dynamic Web Pages 7) Coding Web Apps 8) Coding Mobile Web Apps

Thee ways of specifying a color:

1) Color keyword (red, yellow, purple, lemonchiffon, papayawhip, and peachpuff). 2) rgb() function: it takes three values: one for red, one for green, and one for blue (separated by commas). Each of these can be a value between 0 and 255, and these combinations can produce any of the 16 million or so colors on the spectrum. (rgb(255, 99, 71)) 3) RGB code: a six-digit value that takes the form #rrggbb, where rr is a two-digit value that specifies the red component of the color, gg is a two-digit value that specifies the green component, and bb is a two-digit value that specifies the blue component. Alas, these two-digit values are hexadecimal — base 16 — numbers, which run from 0 to 9 and then a to f. As two-digit values, the decimal values 0 through 255 are represented as 00 through ff in hexadecimal. (#ff6347)

Order of languages

1) HTML & CSS (front end) 2) JavaScript (front end) 3) jQuery (front end) 4) PHP and MySQL (back end)

Suppose you want to use a web page to display some data that resides on the server, the steps are:

1) JavaScript determines the data that it needs from the server (JavaScript has various ways it can do this, such as extracting the information from the URL, reading an item the user has selected from a list, or responding to a click from the user.). 2) JavaScript sends a request for that data to the server (In most cases, and certainly in every case you see in this book, JavaScript sends this request by calling a PHP script on the server.). 3) The PHP script receives the request and passes it along to MySQL (The PHP script uses the information obtained from JavaScript to create an SQL command that MySQL can understand.). 4) MySQL uses the SQL command to extract the required information from the database and then return that data to the PHP script. 5) The PHP script manipulates the returned MySQL data into a form that JavaScript can use [JavaScript can't read raw MySQL data, so one of PHP's most important tasks is to convert that data into a format called JavaScript Object Notation (JSON, for short, and pronounced like the name Jason) that JavaScript is on friendly terms with (see Book 6, Chapter 1 for more about this process).]. 6) PHP sends the JSON data back to JavaScript. 7) JavaScript displays the data on the web page (One of the joys of JavaScript is that you get tremendous control over how you display the data to the user. Through existing HTML and CSS, and by manipulating these and other web page elements using JavaScript, you can show your data in the best possible light.).

Some Common CSS Text Properties

1) font-size: - font-size: 16px; - Sets the size of the text 2) font-family: - font-family: serif; - Sets the typeface of the text 3) font-weight: - font-weight: bold; - Sets whether the text uses a bold font 4) font-style: - font-style: italic; - Sets whether the text uses an italic font 5) text-decoration: - text-decoration: underline; -Applies (or removes) underline or strikethrough styles 6) text-align: - text-align: center; - Aligns paragraph text horizontally 7) text-indent: - text-indent: 8px; - Sets the size of the indent for the first line of a paragraph

Steps to set up an external style sheet:

1. Use text editor to create a new text file. 2. Add your style rules to this file - Note that you don't need the <style> tag or any other HTML tags. 3. Save the file. - It's traditional to save external style sheet files using a .css extension (for example, styles.css), which helps you remember down the road that this is a style sheet file. You can either save the file in the same folder as your HTML file, or you can create a subfolder (named, say, css or styles). 4. For every page in which you want to use the styles, add a <link> tag inside the page's head section. - Why is this so powerful? You can add the same <link> tag to any number of web pages and they'll all use the same style rules. This makes it a breeze to create a consistent look and feel for your site. And if you decide that your <h1> text should be green instead, all you have to do is edit the style sheet file (styles.css). Automatically, every single one of your pages that link to this file will be updated with the new style!

What happens behind the scenes when you click a link or type a web page address into your browser

1. You tell the web browser the web page you want to visit (clicking a link or typing the URL [uniform resource locator]). 2. The browser decodes the URL (see next slide. 3. The browser contacts the web server and requests the web page (With the web server's unique IP address in hand, the web browser sets up a communications channel with the server and then uses that channel to send along a request for the web page). 4. The web server decodes the page request (Decoding the page request involves a number of steps. First, if the web server is shared between multiple user accounts, the server begins by locating the user account that owns the requested page. The server then uses the page address to find the directory that holds the page and the file in which the page code is stored). 5. The web server sends the web page file to the web browser. 6. The web browser decodes the web page file (Decoding the page file means looking for text to display, instructions on how to display that text, and other resources required by the page, such as images and fonts). 7. If the web page requires more resources, the web browser asks the server to pass along those resources. 8. For each of the requested resources, the web server locates the associated file and sends it to the browser. 9. The web browser gathers up all the text, images, and other resources and displays the page in all its digital splendor in the browser's content window.

A run of multiple spaces, or tabs, or pressing enter (i.e., white space) is ignored.

Giving absolute positioning a whirl (3-4)

Absolute positioning not only offsets the element from its default position, but it also removes the element from the page flow. Sounds useful, but if the element is no longer part of the page flow, from what element is it offset? Good question, and here's the short answer: the closest ancestor element that uses non-static positioning. If that has you furrowing your brow, I have a longer answer that should help. To determine which ancestor element is used for the offset of the absolutely positioned element, the browser goes through a procedure similar to this: 1. Move one level up the page hierarchy to the previous ancestor. 2. Check the position property of that ancestor element. 3. If the position value of the ancestor is static, go back to Step 1 and repeat the process for the next level up the hierarchy; otherwise (that is, if the position value of the parent is anything other than static), then offset the original element with respect to the ancestor. 4. If, after going through Steps 1 to 3 repeatedly, you end up at the top of the page hierarchy — that is, at the <html> tag — then use that to offset the element, which means in practice that the element is offset with respect to the browser's content area. I mention in the previous section that relative positioning is weird because it keeps the element's default position in the page flow intact. However, now that weirdness turns to goodness because if you want a child element to use absolute positioning, then you add "position: relative" to the parent element's style rule. Because you don't also supply an offset to the parent, it stays put in the page flow, but now you have what CSS nerds called a positioning context for the child element. I think an example would be welcome right about now (see image)

CSS measurement units

All browsers set a default size for regular text, and that default is usually 16px. - An absolute measurement unit is one that has a fixed size: either 1/96 of an inch in the case of a pixel, or 1/72 of an inch in the case of a point. - A relative unit is one that doesn't have a fixed size. Instead, the size depends on whatever size is supplied to the element. For example, suppose the browser's default text size is 16px, which is equivalent then to 1em. If your page consists of a single <article> tag and you set the article element's font-size property to 1.5em, then the browser will display text within the <article> tag at 24px (since 16 times 1.5 equals 24). If, however, the browser user has configured her default text size to 20px, then she'll see your article text displayed at 30px (20 times 1.5 equals 30). - The em unit can sometimes be a head-scratcher because it takes its value from whatever element it's contained within. For example, if your page has an <article> tag and you set the article element's font-size property to 1.5em, then the browser will display text within the <article> tag at 24px (assuming a 16px default size). However, if within the <article> tag you have a <section> tag and you set the section element's font-size property to 1.25em, then the browser will display text within the <section> tag at 30px (since 24 times 1.25 equals 30). - If you want more consistency in your text sizes, use rem instead of em, since rem is always based on the default font size defined by either the web browser or the user. For example, if your page uses a 16px default size and it has an <article> tag with the font-size property set to 1.5rem, then the browser will display text within the <article> tag at 24px. If within the <article> tag you have a <section> tag and you set the section element's font-size property to 1.25rem, then the browser will display text within the <section> tag at 20px (since 16 times 1.25 equals 20).

Flexbox browser support

All major web browsers, both desktop and mobile, support flexbox. The bad news is that they haven't always supported flexbox, or, to be accurate, they've supported it, but only with what are known as vendor prefixes. A vendor prefix is a label specific to each browser — such as -webkit- for browsers that use the WebKit page rendering engine (including Chrome and Safari), -moz- for Firefox, and -ms- for Microsoft Edge and Internet Explorer — that enabled the browser to implement a CSS feature before knowing the final specification. So while a declaration such as "display: flex" will work just fine in about 90 percent of today's browsers, to handle the rest you need to include prefixed versions of the same declaration: container { .....display: -webkit-box; .....display: -ms-flexbox; .....display: flex; } - Wait until your CSS code is complete (or nearly so), then run it through the online Autoprefixer tool, which will add all the required prefixes for you lickety-split: https://autoprefixer.github.io

Inline styles

An inline style is a style rule that you insert directly into whatever tag you want to format by adding the style attribute to your tag, and then by setting it equal to one or more declarations, separated by semicolons. - General syntax: <element style="property1: value1; property2: value2; ..."> - Note that an inline style gets applied only to the tag within which it appears. - difficult to maintain because they end up scattered all over the page's HTML code. You're also more likely to want a particular style rule applied to multiple page elements.

Internal style sheet (or embedded style sheet)

An internal style sheet is a style sheet that resides within the same file as the page's HTML code (embedded between the <style> and </style> tags in the page's "head" section). It consists of one or more style rules embedded within a <style> tag - General syntax: <style> .....elementA { ..........propertyA1: valueA1; ..........propertyA2: valueA2; ... ... ... ... ... ... .....} .....elementB { ..........propertyB1: valueB1; ..........propertyB2: valueB2; ... ... ... ... ... ... .....} </style> - My single style rule for the elementA gets applied to all the elementA tags in the web page. That's the power of an internal style sheet: You only need a single rule to apply one or more styles to every instance of a particular element. - The internal style sheet method is best when you want to apply a particular set of style rules to just a single web page. - If you have rules that you want applied to multiple pages, then you need to go the external style sheet route.

Flexible Box Layout Module (flexbox)

As opposed to the default page flow and layouts that use floats and inline blocks, all of which render content using rigid blocks, flexbox renders content using containers that can grow and shrink — I'm talking both width and height here — in response to changing content or browser window size. But flexbox also offers powerful properties that make it a breeze to lay out, align, distribute, and size the child elements of a parent container. Flexbox divides its world into two categories: » Flex container: This is a block-level element that acts as a parent to the flexible elements inside it. » Flex items: These are the elements that reside within the flex container.

Aligning flex items along the secondary axis

Besides aligning the flex items along the primary axis, you can also align them along the secondary axis. For example, if you've set "flex-direction" to "row", which gives you a horizontal primary axis, then the secondary axis is vertical, which means you can also align the flex items vertically. By default, the flex items always take up the entire height of the flex container, but you can get a different secondary axis alignment by changing the value of the "align-items" property: container { .....display: flex; .....align-items: stretch|flex-start|flex-end|center|baseline; } - see image for examples of possible values of "align-items" property when the secondary axis is vertical. Some notes about Table 4-2: » To make the examples useful, I added some height to the flex container (the edges of which are designated by a double border) and I added random amounts of top and bottom padding to each flex item. » The "stretch" alignment is the default, so you can leave out the "align-items" property if stretch is the alignment you want. » The "baseline" value aligns the flex items along the bottom edges of the item text. (Technically, given a line of text, the baseline is the invisible line upon which lowercase characters such as o and x appear to sit.)

Creating grid gaps

By default, the browser doesn't include any horizontal space between each column, or any vertical space between each row. To add space, you can add the "grid-column-gap" and "grid-row-gap" properties to your grid container: container { .....display: grid; .....grid-column-gap: column-gap-value; .....grid-row-gap: row-gap-value } [In both properties, the value is a number expressed in any of the standard CSS measurement units (px, em, rem, vw, or vh).] - Example: .container { .....display: grid; .....grid-template-columns: 100px 300px 200px; .....grid-template-rows: 100px 200px; .....grid-column-gap: 10px; .....grid-row-gap: 15px; } - There's a shorthand property called "grid-gap" that you can use to combine "grid-column-gap" and "grid-row-gap" into a single declaration: container { .....display: grid; .....grid-gap: column-gap-value row-gap-value; } "While I was writing this book, the CSS Grid overlords declared that the names of the gap-related properties are going to change in the future": (see image).

Allowing flex items to grow (1-4)

By default, when you set the "justify-content" property to "flex-start", "flex-end", or "center", the flex items take up only as much room along the primary axis as they need for their content, as shown earlier in Figure 4-6 and Table 4-1. This is admirably egalitarian, but it does often leave a bunch of empty space in the flex container. Interestingly, one of the meanings behind the "flex" in flexbox is that you can make one or more flex items grow to fill that empty space. You configure a flex item to grow by setting the "flex-grow" property on the item: item { .....flex-grow: value; } Here, "value" is a number greater than or equal to 0. The default value is 0, which tells the browser not to grow the flex items. That usually results in empty space in the flex container (See Figure 4-9 in previous note card). For positive values of "flex-grow", there are three scenarios to consider: (see next note cards) - To calculate what proportion of the flex container's empty space is assigned to each flex item, add up the "flex-grow" values, then divide the individual "flex-grow" values by that total. For example, values of 1, 2, and 1 add up to 4, so the percentages are 25 percent (1/4), 50 percent (2/4), and 25 percent (1/4), respectively.

Difficult programming languages of the past

C++, Perl

Aligning grid items

CSS Grid offers several properties that you can use to align your grid items. For the grid container, you have the "justify-items" and "align-items" properties: container { .....justify-items: start|end|center|stretch; .....align-items: start|end|center|stretch; } » justify-items: Aligns the content inside each grid item horizontally. You can align items to the left ("start"), the right ("end"), in the middle ("center"), or across the width of the item ("stretch"; this is the default value). » align-items: Aligns the content inside each grid item vertically. You can align items to the top ("start"), the bottom ("end"), in the middle ("center"), or across the height of the item ("stretch"; this is the default value). For a grid item, you have the "justify-self" and "align-self" properties: item { .....justify-self: start|end|center|stretch; .....align-self: start|end|center|stretch; } » justify-self: Aligns the content inside the grid item horizontally. You can align the item to the left ("start"), the right ("end"), in the middle ("center"), or across the width of the item ("stretch"; this is the default value). » align-self: Aligns the content inside the grid item vertically. You can align the item to the top ("start"), the bottom ("end"), in the middle ("center"), or across the height of the item ("stretch"; this is the default value).

CSS Selectors

CSS has a huge number of ways to define what parts of the page you want to style. These methods for defining what to style are called selectors. There are many type selectors aside a specific tag— a few dozen, in fact — but lucky for you, only four should cover most of your web development needs: 1) class selector 2) id selector 3) descendant selector 4) child selector

An example without using CSS grid, followed by its correction using CSS grid

CSS: .container { .....border: 5px double black; } .item { .....border: 1px solid black; .....padding: .1rem; .....font-family: "Verdana", sans-serif; .....font-size: 5rem; .....text-align: center; } .item1 { .....background-color: rgb(240, 240, 240); } .item2 { .....background-color: rgb(224, 224, 224); } .item3 { .....background-color: rgb(208, 208, 208); } .item4 { .....background-color: rgb(192, 192, 192); } .item5 { .....background-color: rgb(176, 176, 176); } HTML: <div class="container"> .....<div class="item item1">1</div> .....<div class="item item2">2</div> .....<div class="item item3">3</div> .....<div class="item item4">4</div> .....<div class="item item5">5</div> </div> - The browser does its default thing where it stacks the "div" blocks on top of each other and makes each one take up the full width of its parent "div" (the one with the "container" class), which, in Figure 4-5, has its boundaries marked by the double border. Correction: Now configure the parent "div" — again, the one with the "container" class — as a flex container with a horizontal primary axis: .container { .....display: flex; .....flex-direction: row; .....border: 5px double black; } -This automatically configures the child "div" elements — the ones with the "item" class — as flex items. As you can see in Figure 4-6, the flex items are now aligned horizontally and only take up as much horizontal space as their content requires.

Laying out content columns with Grid (Same example of page layout as before)

CSS: body { .....display: grid; .....grid-template-columns: 1fr 10rem; .....grid-template-rows: 2.5rem 2.5rem 1fr 2.5rem; .....grid-gap: 1rem 1rem; .....min-height: 100vh; } header { .....grid-column: 1 / end; .....grid-row: 1; .....border: 1px solid black; } nav { .....grid-column: 1 / end; .....grid-row: 2; .....border: 1px solid black; } article { .....grid-column: 1; .....grid-row: 3; .....border: 1px solid black; } aside { .....grid-column: 2 / end; .....grid-row: 3; .....border: 1px solid black; } footer { .....grid-column: 1 / end; .....grid-row: 4; .....border: 1px solid black; } HTML: <body> .....<header> ..........Header .....</header> .....<nav> ..........Navigation .....</nav> .....<article> ..........Article .....</article> .....<aside> ..........Aside .....</aside> .....<footer> ..........Footer .....</footer> </body> Some observations: » The <body> tag is set up as a grid container, and that container is styled with two columns and four rows. » The body element has its "min-height" property set to 100vh, which makes the grid container always take up at least the entire height of the browser's content area. » All "header", "nav", and "footer" elements span from the first column to the end of the grid, and they're assigned rows 1, 2, and 4, respectively. » This version of the classic layout doesn't include a "main" element, because CSS Grid doesn't offer a mechanism for nesting grids. » The "article" element uses only column 1 and row 3, both of which were defined with the size 1fr, which allows the "article" element to take up the free space in the grid. » The "aside" element uses column 2, which was assigned a width of 10rem, so its width is fixed.

Same "another example" (with inline blocks):

CSS: body { .....margin: 2rem; .....width: 30rem; } header { .....height: 2.5rem; .....border: 1px solid black; } nav { .....height: 2.5rem; .....margin-top: 1rem; .....border: 1px solid black; } main { .....margin-top: 1rem; .....height: 10rem; } article { .....display: inline-block; .....margin-right: 1rem; .....width: 20rem; .....height: 100%; .....border: 1px solid black; } aside { .....display: inline-block; .....width: 9rem; .....height: 100%; .....border: 1px solid black; } footer { .....height: 2.5rem; .....margin-top: 1rem; .....border: 1px solid black; } HTML: <header> .....Header </header> <nav> .....Navigation </nav> <main> .....<article> ..........Article .....</article><aside> ..........Aside .....</aside> </main> <footer> .....Footer </footer> - Notice, first, that in the CSS both the "article" element and the "aside" element are styled with "display: inline-block". More mysteriously, in the HTML, notice that I jammed together the </article> and <aside> tags. What's up with that? It's an eccentric feature of using inline blocks in this way that there shouldn't be any whitespace between one inline block and another. It's weird, but it works.

Another example (with floats): one common page layout is to have a header at the top of the page, a navigation area below the header, and a footer at the bottom of the page, where all three span the width of the page. Between the navigation area and the header, you have the main content of the page, which is split horizontally between an article on one side and a sidebar on the other.

CSS: body { .....margin: 2rem; .....width: 30rem; } header { .....height: 2.5rem; .....border: 1px solid black; } nav { .....height: 2.5rem; .....margin-top: 1rem; .....border: 1px solid black; } main { .....margin-top: 1rem; .....height: 10rem; } article { .....float: left; .....margin-right: 1rem; .....width: 20rem; .....height: 100%; .....border: 1px solid black; } aside { .....float: right; .....width: 9rem; .....height: 100%; .....border: 1px solid black; } footer { .....clear: both; .....height: 2.5rem; .....margin-top: 1rem; .....border: 1px solid black; } HTML: <header> .....Header </header> <nav> .....Navigation </nav> <main> .....<article> ..........Article .....</article> .....<aside> ..........Aside .....</aside> </main <footer> .....Footer </footer> The key elements to notice here are that the <article> and <aside> tags are both children of the <main> tag, and in the CSS the "article" element is styled with "float: left", whereas the "aside" element is styled with "float: right".

Laying out a navigation bar with flexbox (same example as with floats and inline blocks)

CSS: nav { .....background-color: #ccc; } nav ul { .....display: flex; .....justify-content: space-around; .....align-items: center; .....height: 2.5rem; .....list-style-type: none; } main { .....margin-top: 1rem; } HTML: <nav> .....<ul> ..........<li><a href="#">Home</a></li> ..........<li><a href="#">Blog</a></li> ..........<li><a href="#">Store</a></li> ..........<li><a href="#">About</a></li> ..........<li><a href="#">Contact</a></li> .....</ul> </nav> <main> .....Main content goes here... </main> - Notice that I made the "ul" element the flex container. By setting "justify-content" to "space-around" and "align-items" to "center", you get the flex items — that is, the navigation links — perfectly spaced within the navigation bar.

The browser decodes the URL

Decoding the URL means two things: First, it checks the prefix of the URL to see what type of resource you're requesting; this is usually http:// or https://, both of which indicate that the resource is a web page. Second, it gets the URL's domain name — the something.com or whatever.org part — and asks the domain name system (DNS) to translate this into a unique location — called the IP (Internet Protocol) address — for the web server that hosts the page

CSS box model

Every web page consists of a series of HTML tags, and each of those tags represents an element on the page. In the strange and geeky world known as Style Sheet Land, each of these elements is considered to have an invisible box around it (okay, it's a very strange world). You might be tempted to think that this invisible box only surrounds block-level elements, which are those elements that start new sections of text: <p>, <blockquote>, <h1> through <h6>, <div>, all the page layout semantic tags, such as <header>, <article>, and <section>, and so on. That makes sense, but in fact every single tag, even inline elements such as <a> and <span>, have a box around them. This box has the following components: 1) Content: The stuff inside the box (the text, the images, and so on) 2) Padding: The space around the content 3) Border: A line that surrounds the box padding 4) Margin: The space outside of the border separating the box from other boxes to the left and right, as well as above and below 5) Dimensions: The height and width of the box 6) Position: The location of the box within the page - The first four — the content, padding, border, and margin — comprise the box model

Allowing flex items to shrink (1-4)

Flex items can shrink if the flex container doesn't have enough space to fit the items. Shrinking flex items to fit inside their container is the default flexbox behavior, but you gain a measure of control over which items shrink and by how much by using the "flex-shrink" property on a flex item: item { .....flex-shrink: value; } Here, "value" is a number greater than or equal to 0. The default value is 1, which tells the browser to shrink all the flex items equally to get them to fit inside the flex container. - The browser only shrinks each flex item truly equally (that is, by the same amount) when each item has the same size along the primary axis (for example, the same width when the primary axis is horizontal). If the flex items have different sizes, the browser shrinks each item roughly in proportion to its size. - For positive values of "flex-shrink", you have three ways to control the shrinkage of a flex item: (see next note cards)

Laying out content columns with flexbox

Flexbox works best when you use it to lay out components along one dimension, but that doesn't mean you can't use it to lay out an entire page. As long as the page structure is relatively simple, then flexbox works great for laying out elements both horizontally and vertically. - Same example of classic page layout illustrated in floats and inline blocks: CSS: body { .....display: flex; .....flex-direction: column; .....width: 30rem; .....min-height: 100vh; } header { .....height: 2.5rem; .....border: 1px solid black; } nav { .....height: 2.5rem; .....margin-top: 1rem; .....border: 1px solid black; } main { .....flex-grow: 1; .....display: flex; .....margin-top: 1rem; } article { .....flex-grow: 1; .....margin-right: 1rem; .....border: 1px solid black; .....overflow-y: auto; } aside { .....flex-grow: 0; .....flex-shrink: 0; .....flex-basis: 10rem; .....border: 1px solid black; } footer { .....height: 2.5rem; .....margin-top: 1rem; .....border: 1px solid black; } HTML: <body> .....<header> ..........Header .....</header> .....<nav> ..........Navigation .....</nav> .....<main> ..........<article> ...............Article ..........</article> ..........<aside> ...............Aside ..........</aside> .....</main> .....<footer> ..........Footer .....</footer> </body> - Some notes: » The <body> tag is set up as a flex container, and that container is styled with "flex-direction: column" to create a vertical primary axis for the page as a whole. » The body element has its "min-height" property set to 100vh, which makes the flex container always take up at least the entire height of the browser's content area. » All "header", "nav", and "footer" elements are given explicit height values. » The main element is styled with "flex-grow: 1", which tells the browser to grow the "main" element vertically until it uses up the empty space in the flex container. This also ensures that the footer element appears at the bottom of the content area even if there isn't enough content to fill the "main" element. » The "main" element is also a flex container styled with "flex-direction: row" to create a horizontal primary axis. » Inside the "main" flex container, the "article" element is given "flex-grow: 1", so it grows as needed to take up the remaining width of the "main" element (that is, after the width of the "aside" element is taken into account). » To get a fixed-width sidebar, the "aside" element's rule has both "flex-grow" and "flex-shrink" set to 0, and it also includes the declaration "flex-basis: 10rem". The "flex-basis" property provides the browser with a suggested starting point for the size of the element. In this case, with both "flex-grow" and "flex-shrink" set to 0, the "flex-basis" value acts like a fixed width. - There's a shorthand property called "flex" that you can use to combine "flex-grow", "flex-shrink", and "flex-basis" into a single declaration: item { .....flex: grow-value shrink-value basis-value; } For example, I could rewrite the "aside" element's rule in the above example as follows: aside { .....flex: 0 0 10rem; .....border: 1px solid black; }

Styling Sizes

For block-level elements such as <header> and <div>, the browser sets the dimensions as follows: 1) Width: Set to the width of the element's parent. Because by default the width of the <body> element is set to the width of the browser's content area, in practice all block-level elements have their widths set to the width of the content area. 2) Height: Set just high enough to hold all the element's content. - you'd think the "size" of a block element would be the size of its box out to the border: that is, the content, plus the padding, plus the border itself. Nope. By default, the size of a block element's box is just the content part of the box. You have to take into account its padding widths and border sizes if you want to get things right. -You can avoid all those extra calculations by forcing the web browser to be sensible and define an element's size to include not just the content, but the padding and border, as well. A CSS property called "box-sizing" is the superhero here: element { .....box-sizing: border-box; } The declaration "box-sizing: border-box" tells the browser to set the element's height and width to include the content, padding, and border. You could add this declaration to all your block-level element rules, but that's way too much work. Instead, you can use a trick where you use an asterisk (*) "element," which is a shorthand way of referencing every element on the page: * { .....box-sizing: border-box; } Put this at the top of your style sheet, and then you never have to worry about it again. Most of the time you'll only mess with an element's width, because getting the height right is notoriously difficult because it depends on too many factors: the content, the browser's window size, the user's default font size, and more. Height and width apply only to block-level elements such as <article>, <div>, and <p>, and not to inline elements such as <span> and <a>. However, it's possible to convert inline elements into blocks. CSS offers two methods for this inline-to- block makeover: 1) Make it an inline block. If you want to set an inline element's width, height, or other block-related properties, but still allow the element to flow along with the surrounding text, add the following to the element's CSS rule: display: inline-block; 2) Make it a true block. If you want to set an inline element's block-related properties and you no longer want the element to flow with the surrounding text, turn it into an honest-to-goodness block-level element by adding the following to the element's CSS rule: display: block;

Floats (discussed already)

From a page layout standpoint, you generally use floats as needed when you want two or more items to appear side-by-side rather than stacked on top of each other in the default page flow. The general procedure you follow goes something like this: 1. Work your way down the page, allowing the page elements to lay out using the default page flow. 2. When you come to two or more elements that you want to appear side-by- side, float them to the left (usually) or to the right. 3. When you come to the next element that should follow the default page flow, clear the floats for that element. 4. Repeat Steps 1 to 3 until you reach the end of the page. Example: say you're following the above procedure and you come to the "nav" element, which consists of several links. Because the <a> tag is an inline element, you could just toss a bunch of <a> tags inside the nav element and they'd line up alongside each other. You don't get to control the horizontal spacing since an <a> tag isn't a true block. A common way to work around that problem is to add the links as an unordered list, but with two special additions: » The "ul" element's list-style-type property set to "none" to hide the bullets. » The "li" elements (that is, the list items) are styled with "float": "left" so they display side-by-side instead of vertically.

Gives the text that the browser displays in the tab; as a side note, the browser displays the page title in the favorites list (booksmarks), so you must write something that makes sense.

HTML adds structure and CSS adds formatting (style)

HTML consists of tags and CSS of properties.

HTML'S structures often come with some styling attached

Providing Fallbacks for Page Layouts

Here's a summary of the current state of page layout in today's world: » Nearly 80 percent of browsers support Grid. This is too small a number to build a Grid-only layout. » About 85 percent of browsers fully support flexbox, although vendor prefixes are required. This is great support, but if you do a flexbox-only layout, about one in seven visitors will see your page in an ugly light. » All browsers support both the "float" property and "display: inline-block". Does this mean you should just use floats or inline blocks and ignore flexbox and Grid until they have 100-percent browser support? No way! Through a technique called progressive enhancement, you can build a layout that uses a newer technology, but also includes an older page layout system that gets used with browsers that don't support the newer CSS. An older technology that a browser uses when it doesn't understand a newer technology is called a fallback. The easiest way to implement fallbacks is to add feature queries, which use the @ supports rule to check whether the web browser supports a CSS feature: @supports (property: value) { .....Code to run if the browser supports the property-value } Replace "property" and "value" with the name of the CSS property and its value you want to check. For example, the following feature query-checks for Grid support: @supports (display: grid) { .....Grid CSS goes here } To put this all together, here's some pseudo-code that shows how you'd implement your progressive enhancement: Float or inline-block CSS comes first @supports (display: flexbox) { .....Flexbox CSS goes here } @supports (display: grid) { .....Grid CSS goes here } The browser first implements the float or inline-block layout. If the browser supports flexbox, then it will implement the flexbox CSS, which automatically overrides the floats and inline-blocks (although you might have to apply width: auto to some elements to override explicit width settings from earlier in your code). If the browser supports Grid, it implements the Grid CSS, which overrides the flexbox code.

"font-weight" property

Here, value is either the word bold, or one of the numbers 100, 200, 300, 400, 500, 600, 700 (this is the same as using bold), 800, and 900, where the higher numbers give bolder text and the lower numbers give lighter text; 400 is regular text, which you can also specify using the word normal. Note, however, that depending on the typeface you're using, not all of these values will give you bolder or lighter text.

font-family

Here, value is the name of the typeface, which needs to be surrounded by quotation marks if the name contains spaces, numbers, or punctuation marks other than a hyphen (-). Feel free to list multiple typefaces, as long as you separate each with a comma. When you list two or more font families, the browser reads the list from left to right, and uses the first font that's available either on the user's system or in the browser itself. - 3 choices: 1) Generic font: a font that's implemented by the browser itself and set by using one of the following five keywords: serif (offers small cross strokes at the ends of each character), sans-serif (doesn't use the cross strokes), cursive (looks like handwriting), fantasy (a decorative font), or monospace (gives equal space to each character). 2) System font: a typeface that's installed on the user's computer. How can you possibly know that? You don't. Instead, you have two choices. One possibility is to use a system font that's installed universally. Examples include Georgia and Times New Roman (serifs), Verdana and Tahoma (sans serifs), and Courier New (monospace). The other way to go is to list several system fonts, knowing that the browser will use the first one that's implemented on the user's PC. Example: "font-family: "Gill Sans", Calibri, Verdana, sans-serif;" 3) Google font: offer access to hundreds of free and well-crafted fonts that you can use on your site. Go to https://fonts. google.com, find a font you like, then click the plus sign (+) beside it. Click "1 Family Selected" and then use the Customize tab to add styles such as bold and italic. In the Embed tab, copy the <link> tag and then paste it in your HTML file, somewhere in the <head> section (before your <style> tag, if you're using an internal style sheet, or before your CSS <link> tag, if you're using an external style sheet). Go back to the Embed tab, copy the font-family rule, and then paste that rule into your CSS.

Handling words and characters with <span>

If you might want to do something with a small chunk of a larger piece of text, such as a phrase, a word, or even a character or three, then you need to turn to a so-called inline element, which creates a container that exists within some larger element and flows along with the rest of the content in that larger element. The most common inline element to use is <span>, which creates a container around a bit of text: <p> Notice how an <span style="font-variant: small-caps"> inline element</span> flows right along with the rest of the text. </p>

Giving absolute positioning a whirl (3-4) [continuation]

In the CSS, the "section" element is styled with the "position: relative" declaration, and the "img" element is styled with "position: absolute" and "top" and "right" offsets set to "0". In the HTML, you can see that the "<section>" tag is the parent of the "<img>", so the latter's absolute positioning will be with respect to the former. With top and right offsets set to "0", the image will now appear in the top right corner of the section element and, indeed, it does, as you can see in Figure 3-14.

It belongs in the "head tag"; it tells the web browser that your web page uses the UTF-8 character set [which contains almost every character (domestic and foreign), punctuation mark, and symbol known to humankind]. - It lets you add special characters such as © and ™ directly to your web page text

What is a style sheet?

It is a collection styles that you can apply to a web page

Dynamic web page

It is one that includes content that, rather than being hard-wired into the page, is generated on-the-fly from the web server. This means the page content can change based on a request by the user, by data being added to or modified on the server, or in response to some event, such as the clicking of a button or link.

Storing data on the server: MySQL

MySQL is a relational database management system that runs on the server. You use it to store the data you want to use as the source for some (or perhaps even all) of the data you want to display on your web page. Using a tool called Structured Query Language (SQL, pronounced "ess-kew-ell," or sometimes "sequel"), you can specify which subset of your data you want to use.

Aligning flex items along the primary axis

Notice in Figure 4-6 that the flex items are bunched together on the left side of the flex container (which has its boundaries shown by the double border). This is the default alignment along the primary axis, but you can change that by modifying the value of the "justify-content" property: container { .....display: flex; .....justify-content: flex-start|flex-end|center|space-between|space-around; } - see image for examples of possible values of "justify-content" property when the primary axis is horizontal. - Some notes: » The "flex-start" alignment is the default, so you can leave out the "justify-content" property if "flex-start" is the alignment you want. » The "space-between" alignment works by placing the first flex item at the start of the flex container, the last flex item at the end of the flex container, and then distributing the rest of the flex items evenly in between. » The "space-around" alignment works by assigning equal amounts of space before and after each flex item, where the amount of space is calculated to get the flex items distributed evenly along the primary axis. Actually, the distribution isn't quite even, because the inner flex items (2, 3, and 4 in Table 4-1) have two units of space between them, whereas the starting and ending flex items (1 and 5, respectively, in Table 4-1) have only one unit of space to the outside (that is, to the left of item 1 and to the right of item 5).

One very common use of character references is for displaying HTML tags (on the web page) without the web browser rendering them as tags. To do this, replace the tag's less-than sign (<) with < (or <) and the tag's greater-than sign (>) with > (or >).

One very common use of character references is for displaying HTML tags without the web browser rendering them as tags. To do this, replace the tag's less-than sign (<) with < (or <) and the tag's greater-than sign (>) with > (or >).

Accessing data on the server: PHP

PHP is a programming language used on the server. It's a very powerful and full featured language, but for the purposes of this book, you use PHP mostly to interact with MySQL databases. You can use PHP to extract from MySQL the subset of data you want to display, manipulate that data into a form that's readable by the front end, and then send the data to the browser

Positioning Elements (1-4)

Positioning allows you to, for example, tell the browser to place an image in the top left corner of the window, no matter where that element's <img> tag appears in the page's HTML code. - "position" property: element { .....position: static|relative|absolute|fixed; } » static: Places the element in its default position in the page flow » relative: Offsets the element from its default position with respect to its parent container while keeping the element in the page flow » absolute: Offsets the element from its default position with respect to its parent (or sometimes an earlier ancestor) container while removing the element from the page flow » fixed: Offsets the element from its default position with respect to the browser window while removing the element from the page flow For the three positioning values — relative, absolute, and fixed — notice that each one offsets the element. Where do these offsets come from? From the following CSS properties: element { .....top: top-value; .....right: right-value; .....bottom: bottom-value; .....left: left-value; } » top: Shifts the element down » right: Shifts the element from the right » bottom: Shifts the element up » left: Shifts the element from the left (In each case, the value you supply is either a number followed by one of the CSS measurement units or a percentage).

Assigning grid items to rows and columns

Rather than letting the web browser populate the grid automatically, you can take control of the process and assign your grid items to specific rows and columns. For each grid item, you specify four values: item { .....grid-column-start: column-start-value; .....grid-column-end: column-end-value; .....grid-row-start: row-start-value; .....grid-row-end: row-end-value; } Notes: » grid-column-start: A number that specifies the column where the item begins. » grid-column-end: A number that specifies the column before which the item ends. For example, if grid-column-end is set to 4, the grid item ends in column 3. Some notes: • If you omit this property, the item uses only the starting column. • If you use the keyword end, then the item runs from its starting column through to the last column in the grid. • You can use the keyword span followed by a space and then a number that specifies the number of columns you want the item to span across the grid. For example, the following two sets of declarations are equivalent: grid-column-start: 1; grid-column-end: 4; grid-column-start: 1; grid-column-end: span 3; » grid-row-start: A number that specifies the row where the item begins. » grid-row-end: A number that specifies the row before which the item ends. For example, if grid-row-end is set to 3, the grid item ends in row 2. Some notes: • If you omit this property, the item uses only the starting row. • If you use the keyword end, then the item runs from its starting row through to the last row in the grid. • You can use the keyword span followed by a space and then a number that specifies the number of rows you want the item to span down the grid. For example, the following two sets of declarations are equivalent: grid-row-start: 2; grid-row-end: 4; grid-row-start: 2; grid-row-end: span 2; - Example: CSS: .container { .....display: grid; .....grid-template-columns: repeat(5, 100px); .....grid-template-rows: repeat(3, 150px); } .item1 { .....grid-column-start: 1; .....grid-column-end: 3; .....grid-row-start: 1; .....grid-row-end: 1; } .item2 { .....grid-column-start: 3; .....grid-column-end: span 3; .....grid-row-start: 1; .....grid-row-end: 1; } .item3 { .....grid-column-start: 1; .....grid-column-end: 1; .....grid-row-start: 2; .....grid-row-end: end; } .item4 { .....grid-column-start: 2; .....grid-column-end: 4; .....grid-row-start: 2; grid-row-end: end; } .item5 { .....grid-column-start: 4; .....grid-column-end: span 2; .....grid-row-start: 2; .....grid-row-end: 2; } .item6 { .....grid-column-start: 4; .....grid-column-end: span 2; .....grid-row-start: 3; .....grid-row-end: 3; } HTML: <div class="container"> .....<div class="item item1">1</div> .....<div class="item item2">2</div> .....<div class="item item3">3</div> .....<div class="item item4">4</div> .....<div class="item item5">5</div> .....<div class="item item6">6</div> </div> - In the example, notice that I used a function named "repeat" to specify multiple columns and rows that are the same size. Here's the syntax to use: repeat(number, size) Replace number with the number of columns or rows you want to create, and replace size with the size you want to use for each of those columns or rows. For example, the following two declarations are equivalent: grid-template-rows: 150px 150px 150px; grid-template-rows: repeat(3, 150px); - CSS also offers two shorthand properties that you can use to make the process of assigning items to columns and rows a bit more streamlined: item { .....grid-column: column-start-value / column-end-value; .....grid-row: row-start-value / row-end-value; }

Descendant selector

Rather than targeting specific tags, classes, or ids, you might need to target every instance of a particular element that is contained within another element. Those contained elements are called descendants, and CSS offers the descendant selector for applying styles to them. To set up a descendant selector, you include in your rule the ancestor and the descendant type you want to style, separated by a space: ancestor descendant { .....property1: value1; .....property2: value2; ... ... ... ... ... ... }

Collapsing containers ahead (3-3) [Continuation 1-2]

Rather than the stack of blocks shown in Figure 3-10, you might prefer to have the "section" and the "aside" elements side-by-side. So you add "width" properties to each, and float the "section" element to the left and the "aside" element to the right: section { .....float: left; .....width: 25rem; } aside { .....float: right; .....width: 15rem; } - Well, that's weird! The line across the top is what's left of the "article" element. What happened? Because I floated both the "section" and the "aside" elements, the browser removed them from the page flow, which made the "article" element behave as though it had no content at all. The result? A CSS bugaboo known as container collapse.

What is "cascading"?

Refers to a mechanism that's built into CSS for propagating styles between elements.

Using relative positioning (2-4)

Relative positioning is a bit weird because not only does it offset an element relative to its parent container, but it still keeps the element's default space in the page flow intact. Here's an example: CSS: .offset-image { .....position: relative; .....left: 200px; } HTML: <h1> .....holloway </h1> <div> .....<i>n.</i> A sunken footpath or road; a path that is enclosed by high embankments on both sides. </div> <img src="/images/holloway1.jpg"> <img src="/images/holloway2.jpg" class="offset-image"> <img src="/images/holloway3.jpg"> The CSS defines a rule for a class named offset-image, which applies relative positioning and offsets the element from the left by 200px. In the HTML, the offset-image class is applied to the middle image. As you can see in Figure 3-13, not only is the middle image shifted from the left, but the space in the page flow where it would have appeared by default remains intact, so the third image's place in the page flow doesn't change. As far as that third image is concerned, the middle image is still right above it.

Grid browser support

See image

External Style Sheet

Separate file that contains your style rules. To use these rules within any web page, you add a special <link> tag inside the page head. This tag specifies the name of the external style sheet file, and the browser then uses that file to grab the style rules.

Making your web coding life easier: jQuery

Sometimes using certain JavaScript statements and structures can be a bit unwieldly. jQuery is a JavaScript package; it is a collection — called a library — of JavaScript code that makes it easier and faster to code for the web. Not only does jQuery give you shorter ways to reference web page elements, but it also incorporates routines that make it easier for you to manipulate HTML tags and CSS properties, navigate and manipulate web page elements, add animation effects, and much more.

Static pages only involve the front end, whereas dynamic pages also bring in the back end (since the back end makes the constant changes for you)

Back end

That part of the web page that resides on the web server. That is, it's the page stuff that the server gathers based on the requests it receives from the browser.

Front end

That part of the web page that the web browser displays in the browser window. That is, it's the page stuff you see and interact with.

The "lang" attribute specifies the language of the document

the <i></i> tag, like the <em></em> tag, by default makes the text to be displayed in italics; however, it does so for different reasons

The <i> tag's job is to mark up alternative text, which refers to any text that you want treated with a different mood or role than regular text. Common examples include book titles, technical terms, foreign words, or a person's thoughts.

CSS grid

The Grid specification gives you a straightforward way to divide up a container into one or more rows and one or more columns — that is, as a grid — and then optionally assign the container's elements to specific sections of the grid. - A Grid uses two categories of elements: » Grid container: This is a block-level element that acts as a parent to the elements inside it and that you configure with a set number of rows and columns. » Grid items: These are the elements that reside within the grid container and that you assign (or the browser assigns automatically) to specific parts of the grid. - With CSS Grid, you can give the web browser instructions such as the following: » Set up the <body> tag as a grid with four rows and three columns. » Place the header element in the first row and make it span all three columns. » Place the nav element in the second row and make it span all three columns. » Place the article element in the third row, columns one and two. » Place the aside element in the third row, column three. » Place the footer element in the fourth row and make it span all three columns.

Page Layout

The arrangement of the page elements within the browser's content area, including not only what you see when you first open the page, but also the rest of the page that comes into view as you scroll down. - the page layout details how a page looks at two levels: » The macro level: Refers to the overall layout of the page, which determines how the major sections of the page — header, nav, main, footer, and so on — fit together as a whole. » The micro level: Refers to the layout within a section or subsection of the page. For example, the page's header element might have one layout, whereas the page's article section might have another. - CSS offers four main layout techniques (each of which you can apply at either the macro level or the micro level): » Floats: Arranges elements by floating them. » Inline blocks: Arranges elements by styling them as inline blocks. » CSS Flexible Box (flexbox): Arranges elements either vertically or horizontally within flexible boxes. » CSS Grid: Arranges the elements in a row-and-column structure. - "Flexbox is essentially for laying out items in a single dimension — in a row OR a column. Grid is for layout of items in two dimensions — rows AND columns."

Assign the item a "flex-shrink" value of 0 (4-4)

The browser doesn't shrink the item. The following rule sets "flex-shrink" to 0 for the element with class "item1", and Figure 4-16 shows that the browser doesn't shrink item 1. - If a flex item is larger along the primary axis than its flex container, and you set "flex-shrink: 0" on that item, ugliness ensues. That is, the flex item breaks out of the container and, depending on where it sits within the container, might take one or more other items with it. If you don't want a flex item to shrink, make sure the flex container is large enough to hold it.

Assign the item a "flex-shrink" value between 0 and 1 (2-4)

The browser shrinks the item less than the other flex items. For example, here's a rule that sets "flex-shrink" to .5 for the element with class "item1", and Figure 4-14 shows that item 1 has shrunk less than the other items in the container.

Assign the item a "flex-shrink" value greater than 1. (3-4)

The browser shrinks the item more than the other flex items. For example, the following rule sets "flex-shrink" to 2 for the element with class "item1", and Figure 4-15 shows that item 1 has shrunk more than the other items in the container.

Clearing your floats (2-3)

The default behavior for non-floated stuff is to wrap around anything that's floated, which is often exactly what you want. However, there will be times when you want to avoid having an element wrap around your floats - You do this by telling the web browser to position the element so that it clears the floated element. You clear an element by adding the clear property: element { .....clear: left|right|both|none; } - Use "clear: left" to clear all left-floated elements, "clear: right" to clear all right-floated elements, or "clear: both" to clear everything

You assign a positive flex-grow value to just one flex item (2-4)

The flex item grows until there is no more empty space in the flex container. For example, here's a rule that sets "flex-grow" to 1 for the element with class "item1", and Figure 4-10 shows that item 1 has grown until there is no more empty space in the flex container.

You assign the same positive flex-grow value to two or more flex items. (3-4)

The flex items grow equally until there is no more empty space in the flex container. For example, here's a rule that sets "flex-grow" to 1 for the elements with the classes "item1", "item2", and "item3", and Figure 4-11 shows that items 1, 2, and 3 have grown until there is no more empty space in the flex container.

You assign a different positive flex-grow value to two or more flex items. (4-4)

The flex items grow proportionally based on the flex-grow values until there is no more empty space in the flex container. For example, if you give one item a flex-grow value of 1, a second item a flex-grow value of 2, and a third item a flex-grow value of 1, then the proportion of the empty space given to each will be, respectively, 25 percent, 50 percent, and 25 percent. Here's some CSS that supplies these proportions to the elements with the classes "item1", "item2", and "item3", and Figure 4-12 shows the results.

The job includes coding what others see on the front end, coding how the server gathers its data on the back end, and coding the intermediate tasks that tie the two together.

Collapsing containers ahead (3-3)

The odd behavior of CSS is apparently limitless, and floats offer yet another example. Consider the following HTML and its result: <article> .....<section> ..........An awfully long time ago... .....</section> .....<aside> ..........<b>Note:</b> Creating a new word by... .....</aside> </article>

Front end, meet back end: JavaScript

The secret sauce that brings the front end and the back end together to create the vast majority of the web pages you see today, is JavaScript. JavaScript is a programming language and is the default language used for coding websites today. JavaScript is, first and foremost, a front-end web development language. That is, JavaScript runs inside the web browser and it has access to everything on the page: the text, the images, the HTML tags, the CSS properties, and more.Having access to all the page stuff means that you can use code to manipulate, modify, even add and delete web page elements. But although JavaScript runs in the browser, it's also capable of reaching out to the server to access back-end stuff. For example, with JavaScript you can send data to the server to store that data in a MySQL database. Similarly, with JavaScript you can request data from the server and then use code to display that data on the web page.

Many web developers use these tags only for the built-in browser formatting that comes with them, but you really should try and use the tags semantically, as the geeks say, which means to use them based on the meaning you want the text to convey.

The tags are: - <em></em> - <i></i> - <strong></strong> - <b></b> - <h1></h1> through <h6></h6> - <blockquote></blockquote>

Making Margins

There are four sections to the margin: element { .....margin-top: top-value; .....margin-right: right-value; .....margin-bottom: bottom-value; .....margin-left: left-value; } - Defaults are one of the biggest sources of frustration for web coders because they force you to relinquish control over one of the most important aspects of web design: the whitespace on the page. Most modern web developers eliminate them entirely by resetting everything to zero by adding the following rule to the top of every style sheet they build: * { .....margin: 0; .....padding: 0; } The downside is that you must now specify the margins and padding for all your page elements yourself, but that extra work is really a blessing in disguise because now you have complete control over the whitespace in your page.

how do you access xampp?

There are two ways, depending on what you're doing: 1) Adding files and folders to the web server: Place the files and folders in the htdocs subfolder of your main XAMPP install folder. For example, if you installed XAMPP to C:\xampp, then your web server's root folder will be C:\xampp\htdocs. 2) Viewing the files and folders on the server: Open your favorite web browser and navigate to the localhost address (or to 127.0.0.1, which gets you to the same place). If you have the XAMPP Control Panel open, you can also click the Apache app's Admin button.

To run special characters on Windows without taking advantage of said tag you use character entities:

These codes come in two flavors: a character reference and an entity name. Character references are basically just numbers, and the entity names are friendlier symbols that describe the character you're trying to display. For example, you can display the registered trademark symbol (™) by using either the "®" character reference or the "®" entity name. Example: "Print-On-Non-Demand®" or "Print-On-Non-Demand®"

Revisiting the Cascade

Three important concepts that you need to drill into your brain if you want to write good CSS and troubleshoot the inevitable CSS problems that will crop up in your web development career: 1) Inheritance: If a parent element is styled with a property, in many cases its child and descendant elements will also be styled with the same property. This is known in the CSS game as inheritance: Parents "pass along" some of their properties to their children and descendants. Notice, however, that I said "some" properties are inherited. Lots of properties — such as the padding, borders, and margins I cover in Book 2, Chapter 3 — don't get inherited, so you need to watch out for inheritance (or its lack) as you code your pages. 2) Weight: The different ways that you can specify styles for a page have a built-in hierarchy of importance, or weight in CSS-speak. Here's that style source hierarchy in ascending order of weight: 1. Browser styles — The list of default styles that the web browser applies to certain HTML tags. This is known officially as the user agent style sheet. 2. User-specified styles — The styles that the web browser user has configured, such as a new default type size. This is known to CSS pros as a user style sheet. 3. External style sheets. 4. Internal style sheets. 5. Inline styles. What this means is that if a web browser comes across the same style property in two or more style sources, it uses the property value from the source that has the greater weight. For example, if you set font-size: 1.5rem in an external style sheet and then set font-size: 2rem with an inline style, the inline style "wins" because it has a greater weight than the external style sheet. 3) Specificity: What happens when two or more style rules from the same source target the same element? You can't go by weight since they all reside in the same style source, so you have to turn to a concept called specificity, instead. This is a score given to each style rule, where the browser implements the rule that garners the highest specificity value. Here's how the browser determines the specificity for a rule: 1. Add one point for each element (such as div or span) in the rule's selector. 2. Add 10 points for each class in the selector. 3. Add 100 points for each ID in the selector. 4. If the selector is part of an inline style, add 1,000 points. In practice, you can use specificity to figure out why a particular element has styles that don't seem right. Quite often, the problem turns out to be that the browser is applying some other style rule that has a higher specificity.

Setting up the flex container

To designate an element as a flex container, you set its "display" property to "flex": container { .....display: flex; } (With that done, the element's children automatically become flex items.) Flexbox is a one-dimensional layout tool, which means the flex items are arranged within their flex container either horizontally — that is, in a row — or vertically — that is, in a column. This direction is called the primary axis and you specify it using the "flex-direction" property: element { .....display: flex; .....flex-direction: row|row-reverse|column|column-reverse; } » row: The primary axis is horizontal and the flex items are arranged from left to right. This is the default value. » row-reverse: The primary axis is horizontal and the flex items are arranged from right to left. » column: The primary axis is vertical and the flex items are arranged from top to bottom. » column-reverse: The primary axis is vertical and the flex items are arranged from bottom to top. - The axis that is perpendicular to the primary axis is called the secondary axis.

Setting up the grid container

To designate an element as a grid container, you set its "display" property to "grid": container { .....display: grid; } With that first step complete, the element's children automatically become grid items.

Collapsing containers ahead (3-3) [Continuation 2-2]

To fix this, you have to force the parent container to clear its own children. CSS: .self-clear::after { .....content: ""; .....display: block; .....clear: both; } HTML: <article class="self-clear"> First, "::after" is a so called pseudo-element that, in this case, tells the browser to create an element and add it to the page flow after whatever element gets the class. What's being added here is an empty string (since you don't want to add anything substantial to the page), and that empty string is displayed as a block that uses "clear: both" to clear the container's children. It's weird, but it works, as you can see in Figure 3-12.

If you want to separate two chunks of text:

Use the <br> tag (line break) if you don't want space between the texts, and use the <p></p> tag if you do.

Values of the "id" attribute are case-sensitive

Page flow

When a web browser renders a web page, one of the really boring things it does is lay out the tags by applying the following rules to each element type: » Inline elements: Rendered from left to right within each element's parent container » Block-level elements: Stacked on top of each other, with the first element at the top of the page, the second element below the first, and so on. - CSS gives you two useful methods for breaking out of the normal page flow: floating and positioning.

Collapsing margins feature

When one element's bottom margin butts up against another element's top margin, common sense would dictate that the web browser would add the two margin values together. Instead, the browser uses the larger of the two margin values and it throws out the smaller value. That is, it "collapses" the two margin values into a single value. To get some extra vertical space between two elements, you have four choices: - Increase the margin-top value of the bottom element. - Increase the margin-bottom value of the top element. - If you already have margin-top defined on the bottom element, and the top element doesn't use a border, add a padding-bottom value to the top element. - If you already have margin-bottom defined on the top element, and the bottom element doesn't use a border, add a padding-top value to the bottom element. In the last two bullets, combining a top or bottom margin on one element with a bottom or top padding on the other element works because the browser doesn't collapse a margin/padding combo.

Inline blocks

When you turn an element into an inline block (by adding "display: inline-block" to the element's style rule), one of two things happens: » If you're working with an inline element, that element becomes a block, but it still flows horizontally with the rest of the surrounding inline content. » If you're working with a block-level element, that element is removed from the default vertical page flow and now flows horizontally with the rest of the surrounding inline content. (It's the second of these — that is, the removal of a block-level element from the default page flow so that it now flows inline — that interests us from a page layout point of view. That is, you can use inline blocks as needed when you want two or more items to appear side-by-side rather than stacked.) - General procedure: 1. Work your way down the page, allowing the page elements to lay out using the default page flow. 2. When you come to two or more elements that you want to appear side-by- side, convert them to inline blocks. 3. Repeat Steps 1 and 2 until you reach the end of the page. (This procedure is very similar to the float steps I outline in the previous section, with one notable exception: When you use inline blocks, you don't need to clear the following elements because the browser does that for you automatically.) Same example of the "nav" element layout as with floats (see image).

Inconveniences of floats and inline blocks

When you use either floats or inline blocks for page layout, there are some banana peels in the path that can trip you up, including forgetting to clear your floats and forgetting to ensure there is no whitespace between two inline blocks. However, beyond these mere annoyances, there are also a few things that float- or inline-block-based layouts have trouble with: » It's very hard to get an element's content centered vertically within the element's container. » It's very hard to get elements evenly spaced horizontally across the full width (or vertically across the full height) of their parent container. » It's very hard to get a footer element to appear at the bottom of the browser's content area. These troubles vanish if you use flexbox.

Trying out fixed positioning (4-4)

With fixed positioning, the element is taken out of the normal page flow and is then offset with respect to the browser's content area, which means the element doesn't move, not even a little, when you scroll the page (that is, the element is "fixed" in its new position). One of the most common uses of fixed positioning is to plop a header at the top of the page and make it stay there while the user scrolls the rest of the content. Here's an example that shows you how to create such a header: CSS: header { .....position: fixed; .....top: 0; .....left: 0; .....width: 100%; .....height: 64px; .....border: 1px double black; .....background-color: rgb(147, 196, 125); } main { .....margin-top: 64px; } HTML: <header> .....<img src="/images/holloway3.jpg"> .....<h1> ..........holloway .....</h1> </header> <main> ... ... ... ... ... ... </main> The HTML includes a "header" element with an image and a heading, followed by a longish "main" section that I don't include here for simplicity's sake. In the CSS code, the "header" element is styled with "position: fixed", and the offsets "top" and "left" set to "0". These offsets fix the header to the top left of the browser's content area. I also added "width: 100%" to give the header the entire width of the window. Note, too, that I set the header "height" to "64px". To make sure the "main" section begins below the header, I styled the "main" element with "margin-top: 64px".

ID selector

You can also use the id attribute as a CSS selector, which enables you to target a particular element with extreme precision. You set this up by preceding the id value with a hashtag symbol (#) in your CSS rule: #id-name { .....property1: value1; .....property2: value2; ... ... ... ... ... ... } - This isn't as useful as the class selector because it can only target a single element, which is why web developers use id selectors only rarely.

You must separate structure and style

The <b></b> tag, like the <strong></strong> tag, by default makes the text bold; however, it does so for different reasons.

You use the <b> tag to mark up keywords in the text. A keyword is a term that you want to draw attention to because it plays a different role than the regular text. It could be a company name or a person's name (think of those famous "bold-faced names" that are the staple of celebrity gossip columns).

Specifying the grid rows and columns

Your grid container doesn't do much on its own. To make it useful, you need to create a grid template, which specifies the number of rows and columns you want in your grid. You set up your template by adding the grid-template-columns and grid-template-rows properties to your grid container: container { .....display: grid; .....grid-template-columns: column-values; .....grid-template-rows: row-values } The column-values and row-values are space-separated lists of the sizes you want to use for each column and row in your grid. The sizes can be numbers expressed in any of the standard CSS measurement units (px, em, rem, vw, or vh), a percentage, or the keyword auto, which tells the browser to automatically set the size based on the other values you specify. Example: CSS: .container { .....display: grid; .....grid-template-columns: 100px 300px 200px; .....grid-template-rows: 100px 200px; } HTML: <div class="container"> .....<div class="item item1">1</div> .....<div class="item item2">2</div> .....<div class="item item3">3</div> .....<div class="item item4">4</div> .....<div class="item item5">5</div> .....<div class="item item6">6</div> </div> -You can also specify a column or row size using a new unit called fr, which is specific to Grid and represents a fraction of the free space available in the grid container, either horizontally (for columns) or vertically (for rows). For example, if you assign one column 1fr of space and another column 2fr, the browser gives one third of the horizontal free space to the first column and two thirds of the horizontal free space to the second column. - If you leave out the "grid-template-rows" property, the browser automatically configures the row heights based on the height of the tallest element in each row.

Coloring the background

background-color: value; - You can add a color to the background of either the entire page or a particular element - make sure you leave enough contrast between the text and background to ensure that your page visitors can still read the text without shaking their fists at you. But I should also warn you that too much contrast isn't conducive to easy reading, either (as in black and white)

Coloring text

color: value; - value can be a color keyword, an rgb() function, or an RGB code

Centering an element horizontally and vertically (flexbox)

container { .....display: flex; .....justify-content: center; .....align-items: center; } - (see image for example)

Adding padding

element { .....padding-top: top-value; .....padding-right: right-value; .....padding-bottom: bottom-value; .....padding-left: left-value; }

What will be learned in the book

how to use HTML and CSS to design and build your site, how to use JavaScript and jQuery to program your pages, and how to use PHP and MySQL to program your web server. -HTML structure and CSS styling -MySQL data and PHP code

Need to know

how to use scripting to go beyond the inherent limitations of HTML and CSS; and how to use code to send and receive data from a web server.

Windows 10 shortcuts (just putting it here)

https://www.windowscentral.com/how-quickly-check-net-framework-version-windows-10

Three main ways to get your web page styled

inline styles, internal style sheets, and external style sheets.

If the image is in the same directory vs when it is in a subdirectory:

same directory: <img src="logo.png" alt="The Logophilia Ltd. company logo"> subdirectory: <img src="/images/macro-flower-and-ant.jpg" alt="Macro photo showing an ant exploring a flower">

Child selector

target only those descendants that reside one level down: in short, the children of some parent element. To aim some styles at the child elements of a parent, you use the CSS child selector, where you separate the parent and child elements with a greater-than sign (>): parent > child { .....property1: value1; .....property2: value2; ... ... ... ... ... ... }

Aligning paragraph text

text-align: left|right|center|justify; - "justify" value tells the web browser to align the element's text on both the left and right margin.

Web Coding and Development for Dummies

Conjuntos de estudio relacionados

Evolution

PY1002 Descartes Foundationalism and the Cogito

Ch 1- 5 Test 3

Saunders CH.45 & 46 Questions

PRIMERICA 10

Passive voice

Fin 424 Final Exam

Diabetes Mellitus Chapter 48

Unit 8 AP Psychology

Cybersecurity review

MICRO Exam 3

exam for OB

Decision Making

Final

peds cardio, gi, gu nclex questions

EAQ Mastery-1 Med Surge

Real Interest Rates & Stocks and other assets

SB6

Paramedic Chapter 33 - Face and Neck Trauma - Multiple Choice

Chapter 46: Acute Kidney Injury and Chronic Kidney Disease elsover