Module 3 Web development foundations PDF

Preview

Summary

Unit 1 Web Development// Cascading Style Sheet// Web Development Foundation C779...

Description

Module 3 Text Related Attributes Learning Objectives : Apply HTML elements and tags to format paragraphs and text. Essential Reading: Fonts Chapter 3 In Practical Web Development: What are fonts? In Simple terms, fonts are series of pictures, or glyphs, determining how letters, numbers and other characters should be displayed. What are three categories of font families? What are the differences between them? Serif, sans-serif, and monospace fonts. What is the font-family property? P { font-family: “Open Sans”, “Helvetica Neue”, Verdana, Helvetica, sans-serif; } Notes: In CSS, the equivalents of this provided through two different properties: Font –weight and Font-style. The two most common values for font-style are normal and italic. The ones for font-weight are normal and bold, and the numbers 100, 200, and so on, through 900. 400 is the same as normal and 700 the same as bold. Font-size Size can be specified in pixels, percentages, or ems. And also rem exists.

When no font-size is specified anywhere, a typical browse will set that size to 16px. The em unit, a term that comes from typography to refer to the size of the letter m in a font, is in CSS, nothing other than the calculated size of the font for the current elements. Example: H1 { font-family: “open Sans”, Arial, sans-serif; font-size:2em; fontweight: bold; } h2 { font-family: Arial, sans-serif; color:#999999; fontsize:1.5em; font-weight:600; } A paragraph of text that represents what could be insert in a book

CSS rules to go with it: Div.insert { font-family: Baskerville, “Times News Roman”, serif; fontsize:0.8em; color:brown; } .insert p { font-size: 0.8em:} .insert P { font-size: 80% }

Line-height There is one more important property for dealing with text: the line-height. Example: P { line-height: 24px; } p { line-height: 1.5: } p{ line-height: 150%; } Note that this specifies the space between lines of a paragraph , not the space between paragraphs. That would be determined by the margin, and the margin is one aspect of the single most important concept of CSS: the box model.

CSS Font Formatting Options Notes: 

font-family:

defines the font type







 

o serif fonts are often used for paragraph text on a web page and include Times New Roman, Courier, Courier New, and Georgia o sanserif fonts are often used for content headers and include Arial, Helvetica, and Geneva text-align: defines the text alignment to be employed and the common values are left, center, right, and justify font-size: defines how many pixels will be used for the current font, with the values expressed numerically by the following possible units: o px(pixels): a tiny unit of illumination on a computer screen o em: used to describe the proportion of the current font size (using the letter m); e.g. 2em indicates twice the size of the current font size o %: used to describe the proportion of the current font of the body section, as compared to the size of the current font; e.g. 50% indicates that the font will be ½ the size of the body section. o vw: used to indicate a proportion of the window size; e.g. 2vw corresponds to 2% of the number of pixels of the current viewport of the page (the window width) font-style: defines the use of either normal, italic, or oblique font styles font-weight: defines the use of normal or bold font-weight line-height: defines the space occupied by each text line with common values being 1 for single space, 1.5 for one and a halfspace, and 2 for double space, but in practice, any numerical value is accepted as a proportion of the standard line space

Typography for the web in the course CSS Essential Training from LinkedIn Learning.  Considering the subject matter of your web page, what factors might influence the type of font face you choose?

Easy to read the and to set a tone,  Which font typefaces are used the most often?

Serif and Sans-serif

Notes: Typography = type for readability and to engage and communicate with the reader. 5 types of typeface Script Decorative Monospace Serif’ Sana-serif Project: Typography styles in the course CSS Essential Training from LinkedIn Learning  Which kind of CSS style formats has been employed in this project example? Font-size, Line-height, Sans-serif  Why is it important to reload the web page each time you make changes to the CSS style formatting?

It lets you see the changes made in the CSS and html. Doc Supplement Video: Understanding Text in HTML Notes: One of HTML’s main jobs is to give text structure and meaning. Heading and Paragraphs



Why should we structure Text? Users can get information quickly. Enables accessibility tools to understand information. Enables browsers to style the content Help search engines to understand content

Open CodePen (opens new tab). 2. Create an HTML code snippet that will produce the HTML document as shown. Ensure that you use proper structure and syntax in your code development. Code entered will render in the display window. 3. Once complete, copy your completed code and paste in the text field, then click Submit. 4. You will receive feedback to compare to the content and structure of code you have produced.

1.

 Explanation:



H1: Formatting (using Helvetica) H2: Font Families (using italic Times New Roman) This is a paragraph, shown in the Georgia font. H2: Text Alignment and Font Size Default alignment and size. Centered and 20 pixels sized font. Aligned to the right and .75 the normal size (.75em).

Justified and 3% of the window size (3vw) (note that it changes the actual size as you increase or decrease the window width - try it).

Compare your code to this suggested solution. This will allow you to make any necessary adjustments. You are encouraged to practice using this code to increase your skill with developing HTML code for rendering different text font families and alignments. Try changing the variables at each of the header and body text levels.

THE BOX MODEL Learning Objectives: Apply basic aspects of CSS. The Box Model of Chapter 3 in Practical Web Development.  What is the box model? In CSS, the term box model is used while talking about design and layout. It is essentially a box that wraps around HTML elements and that can consist of, from outside to inside: margins, borders, padding, and the actual content. APA 7th Edition (American Psychological Assoc.) Wellens, P. (2015). Practical Web Development. Packt Publishing.  What is padding, border, and margin? Next we can have padding. This takes the same background-color as the element and increases the inner portion of our box. In our example, 20px are added on all four sides of the element. Then we can have a border. This puts a border around our element with the thickness, color, and shape we specify. We used a solid border of 5px around all the sides, and thus, so far our box is already (5 + 25

+ 150 + 25 + 5 = 210) x 210 pixels. Finally, there is the margin. The margin, if we want one, is the area on the outer side of our element box. It is transparent, so it has the background color of the parent element. It merely creates a distance between the box and the adjacent box(es). In this example, we used a margin of 40px. This makes the total size of our box (40 + 210 + 40 = 290) x 290 pixels. APA 7th Edition (American Psychological Assoc.) Wellens, P. (2015). Practical Web Development. Packt Publishing.  What code is required to not include a border? none APA 7th Edition (American Psychological Assoc.) Wellens, P. (2015). Practical Web Development. Packt Publishing.

Introduction to the Box Model in the Course CSS Essential Training from LinkedIn Learning  What properties make up the box model? Width, Height, Padding, Margin, Border

The Box Model Properties in the Course CSS Essential Training from LinkedIn Learning  What is padding? Surrounds the content area and this space is included in the element  What are relative length units? For box properties, the and data types are used.

The Box Model  Content Box

 Padding Box  Border Box  Margin Box Box Properties    

Width Height Padding Margin

Values and Units For box properties, the and data types are used. Unit .container { Width: 1000px; } .inside-container { Width: 50%; /* 500px */ } Absolute Unit px: Pixel Cm: Centimeter Mm: Millimeter In: Inch Pc: Pica (equal to 1/6 of an inch) Pt: point ( equal to 1/72 of an inch) Width: 1000px; Relative Unit em: Represents inherited font-size of element

rem: Represents the font-size of the root element 1vw= 1% of the width of the viewpoint 1vh = 1% of the height of the viewpoint vmin: Equal to the smaller of vw and vh vmax: Equal to the larger of vw and vh

Positioning Learning Objectives : Apply basic aspects of CSS

The CSS properties float and position provide the flexibility necessary to move elements on a web page.

Positioning of Chapter 3 in Practical Web Development

 What is float? CSS way to stack elements horizontally. If you give all of them a: float:left; You stack them from left to right. With a: float:right; APA 7th Edition (American Psychological Assoc.) Wellens, P. (2015). Practical Web Development. Packt Publishing.  What is the position property? can be used to position elements in a spot on the page that is different to where they would normally go. APA 7th Edition (American Psychological Assoc.) Wellens, P. (2015). Practical Web Development. Packt Publishing.  What is the difference between absolute and relative position?

When you replace relative by absolute, the red box will be 100px down and 10px to the right, relative to the ancestor element instead. This is typically the browser window itself. APA 7th Edition (American Psychological Assoc.) Wellens, P. (2015). Practical Web Development. Packt Publishing.

Introduction to Float in the course CSS Essential Training from LinkedIn Learning  Why was the float property used? Adding side bar creating multiple column legacy code floating an image to have a text around it

The Float and Clear Properties in the course CSS Essential Training From LinkedIn Learning

 How can the float property be used? Magazine style layout, change the normal document flow change positing  What are float-based page layouts? The float property can be used to change the normal document flow by floating elements to the left or right side of its container. And when elements are floated, they are removed from the normal flow though they remain part of the flow, resulting in the change of the positioning of the surrounding elements. Position in the course CSS Essential Training from LinkedIn Learning.

 What are the five different values to change the flow of a document? Static: not positioned Relative: relative to current position

Absolute: relative to containing element Fixed: relative to the viewport Sticky: relative to containing element and viewpoints  What is an offset? Relative positioning does not affect the flow of the other elements.  What is sticky positioning? Sticky: relative to containing element and viewpoints: it stays in the initial spot until you scroll the page. Then it becomes fixed when the value in the offset property has been met.

Position Position is also used with a combination of the top, right, bottom, and left properties .box { position: relative; Top: 10px; Right: 10px;...