Preparation MICROSOFT

Understand HTML Fundamentals (10-15%)
Construct markup that uses metadata elements

Script; noscript; style; link; meta tags, including encoding, keywords,
viewport, and translate
1- Script
we use <script> tag in the <head>
Form : <script type="text/javascript"> </script>
We use the <script> tag if the browser support 'javascript'
for example
2- noscript
Form : <noscript></noscript>
We use the <noscript> tag if the browser doesn't support
'javascript' or it's disabled for ex to tell him so
3- style
we use <style> tag in the <head>
<style>#hi : we can write css all code here</style>
the attributes of <style> are : <style type="text/css"
media="value">
4- link
we use <link> tag in the <head>
form <link rel="stylesheet" type="text/css"
href="file.css"></link>
5- meta tags
* including encoding : <meta charset="UTF-8">
* keywords : <meta name="keywords" content="HTML,
CSS, ....">
* viewport : <meta name="viewport" content="width=device-
width, initial-scale=1.0">
* translate : not useful!
Construct well-formed markup that conforms to industry best practices

DOCTYPE declaration; HTML; head; body; proper syntax, including closing
tags and commonly used symbols; comments
<!DOCTYPE html> used in the first line in HTML page
Syntax :
<html>
<head>
</head>
<body>

</body>
</html>
Understand CSS Fundamentals (15-20%)

Analyze the impact of using inline styles, internal style sheets, and
external style sheets
When to use inline styles; when to use internal style sheets; when to
use external style sheets; precedence when using a combination of inline styles and
style sheets
1-inline styles
Inline css is used for a specific HTML TAG
1st priority
2-internal style
Internal CSS code is put in the <head> section of a
particular page
2nd priority
3-external style
external CSS code is put in the <head> section the .css
link of the css file
3rd priority
4-precedence when using a combination of inline styles and style
sheets
inline > internal > external.
Construct and analyze rule sets

Valid syntax for the CSS rule set; selectors, including class, id,
elements and pseudo-class
syntax for the CSS rule set :
h1 {color:blue;}
selector {priority:value;}
including class :
.NameOfTheClass{}
including id :
#NameOfTheId{}
pseudo-class : is used to define a special state of an element.
Syntax :
selector:pseudo-class {property:value;}
pseudo-class values : a:link = unvisited link,
a:visited = visited link, a:hover = mouse over link...
pseudo-element : A CSS pseudo-element is used to style specified
parts of an element.
selector::pseudo-element {property:value;}
pseudo-class values : ::after,::before,::first-
letter,::first-line,::selection
Construct well-formed style sheets that conform to industry best practices

Reusing rules and rule sets; commenting; testing on multiple browsers;
web safe fonts
Commenting : /* comments here */
testing on multiple browsers : just browsers support
web safe fonts : font-family: "Times New Roman", Times, serif;
Structure Documents Using HTML (30-35%)

Construct and analyze markup to structure content and organize data
Table tags; h1-h6; p; br; hr; div; span; ul; ol; li
<h1></h6> : heading <h1> is the biggest and <h6> is the smallest
<p></p> : is used for paragraphs
<br> : is used to return to new line
<hr> : to make create a seperator line
<div> : like a box
<span> : is for sentences
every list starts with <ul> tag or <ol> tag
<ul> : Unordred list
<ol> : Ordred List
and for each list item we use <li> tag
Construct and analyze markup that uses HTML5 semantic elements
Semantic tags; header; nav; section; article; aside; footer; details;
summary; figure; caption
Semantic
tag:<article><aside><details><figcaption><figure><footer><header><main><mark><nav><
section><summary><time>
syntax:
<header>
<nav>
<section> <aside>
<article> <aside>
<footer>
Construct and analyze markup that implements navigation

Image links; a; target; bookmark; relative versus absolute links;
navigating simple folder hierarchies
Image links : <img> doesn't have closing tag!
the attribut alt is REQUERED!!!
Form : <img src="img.jpg" alt="Flowers">
we can add the <img width="this" height="and
this" alt="">
a : <a href="url">link text</a>

target : the target attribut specifies where to open the
linked document.
bookmark : is used to allow readers to jump to specific parts of
a Web page.
is used with IDs!
form :
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
relative versus absolute links :
* Relative links : ex : /page.html
* Absolute Links : ex : https://www.facebook.com
navigating simple folder hierarchies: easy measy!
Construct and analyze markup that uses form elements

Form attributes; action; method; submission methods; accessibility;
input types and restrictions; select; textarea; button; output; option; datalist;
fieldset
Form attributes : <form type="value">
type="text" : for one-line
text input field
type="radio" : for selecting
one of many choices
type="submit" : for
submitting the form
Action : defines the action to be
performed when the form is submitted.
form : <form
action="/action_page.php">
method : GET or POST
GET : the submitted form
data will be visible in the page address field
POST : does not display
the submitted form data in the page address field.
Present Multimedia Using HTML (10-15%)
Construct and analyze markup that displays images
img and picture elements and their attributes
<picture> : tag gives web developers more flexibility in
specifying image resources
<img> in HTML has no end tag / in the XHTML <img> tag must be
closed
Describe the appropriate use of the img, svg, and canvas elements
The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
The <svg> tag defines a container for SVG graphics.
<canvas> tag is used to draw graphics, on the fly, via scripting
(usually JavaScript).
Construct and analyze markup that plays video and audio

Video; audio; track; source; simple iframe implementations
<video>
<audio>
<track>
<source>
<iframe>
Style Web Pages Using CSS (20-25%)

Construct and analyze styles that position content
Positioning, including float, relative, absolute, max-width, overflow,
height, width, and align; inline versus block; visibility; box model, including
margins and padding
Construct and analyze styles that format text
Font-family; color; font-style; font-size; font-weight; link colors;
text formatting, including text alignment, text decoration, and indentation
Construct and analyze styles that format backgrounds and borders
Border-color; border-style; border-width; backgrounds; divs; colors
Analyze styles that implement a simple responsive layout
Units of measure; responsive effects with CSS, including viewport and
media query; percentages versus pixels; frameworks and templates; max width

Preparation MICROSOFT

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Preparation MICROSOFT

Transféré par

Droits d'auteur :

Formats disponibles

Understand HTML Fundamentals (10-15%)

Construct markup that uses metadata elements

Construct well-formed markup that conforms to industry best practices

Understand CSS Fundamentals (15-20%)

Construct and analyze rule sets

Construct well-formed style sheets that conform to industry best practices

Structure Documents Using HTML (30-35%)

Construct and analyze markup that implements navigation

a : <a href="url">link text</a>

navigating simple folder hierarchies: easy measy!

Construct and analyze markup that uses form elements

Construct and analyze markup that plays video and audio

Style Web Pages Using CSS (20-25%)

Vous aimerez peut-être aussi