Coding Study Guide PDF

1.
HTML Fundamentals
1.1 Construct markup that uses metadata elements

● script, noscript, style, link, meta tags (encoding, keywords, viewport, and description)
○ Keywords, viewport and description specify a name for the metadata
● Meta can be used to draw attention to your homepage in search engines

○ Using content specifies the value associated with the http-equiv or name attribute
● The <script> tag is used to embed a client-side script (JavaScript).

○ The <script> element either contains scripting statements,or it points to an
external script file through the src attribute.
● The <noscript> tag defines an alternate content to be displayed to users that have
disabled scripts in their browser or have a browser that doesn't support script.
● The <meta> tag defines metadata about an HTML document.

○ Metadata is data (information) about data.
○ <meta> tags always go inside the <head> element,
and are typically used to specify character set, page description, keywords,
author of the document, and viewport settings.
○ Metadata will not be displayed on the page, but is machine parsable.
○ Metadata is used by browsers (how to display content or reload page),
search engines (keywords), and other web services.
● The <link> tag defines the relationship between the current document and an external resource.
○ The <link> tag is most often used to link to external style sheets or to
add a favicon to your website.
○ The <link> element is an empty element, it contains attributes only.
1.2 Construct well-formed page markup

● DOCTYPE declaration, html, head, body, proper syntax, closing tags and commonly used symbols
○ The head tag should always stay above body tag

■ The head tag also stores your css and other metadata.
● What should be contained in the <head> element? <title> <style>
<meta> <link> <script> <base>
■ The <body> tag should define the document's body, and contain all the
contents of an HTML document, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
■ Some characters are reserved in HTML.
● > stands for >, which if injected into a paragraph will show up as > on the webpage.
● < stands for <, and will appear as < on the webpage.
● © will appear as © on the webpage
● will appear as a non-breaking space
● & will appear as a &
● " will appear as a “
● ' will appear as a ‘
● ¢ will appear as a ¢
● £ will appear as a £
● ¥ will appear as a ¥
● € will appear as a €
● ® will appear as a ®
2. CSS Fundamentals
2.1 Analyze and implement inline styles, internal (embedded) style sheets, and
external style sheets
● When to use inline styles, internal (embedded) style sheets,or external style sheets;
precedence when using a combination of inline styles and style sheets
○ With an external style sheet, you can change the look of an entire website by
changing just one file!
■ Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.
● The <link> tag defines the relationship between the current document
and an external resource.
● The <link> tag is most often used to link to external style sheets or
to add a favicon to your website.
● The <link> element is an empty element, it contains attributes only.
■ An external style sheet can be written in any text editor,

and must be saved with a .css extension.
○ An internal style sheet may be used if one single HTML page has a unique style.
■ The internal style is defined inside the <style> element, inside the head section.
■ Internal styles are defined within the <style> element,
inside the <head> section of an HTML page
○ An inline style may be used to apply a unique style for a single element.
■ To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
■ Inline styles are defined within the "style" attribute of the relevant element
■ An inline style loses many of the advantages of a style sheet
(by mixing content with presentation). Use this method sparingly.
● Please understand how to attach an external stylesheet to your webpage for the certification.
● A <style> tag is used for internal style sheets.
2.2 Construct and analyze rule sets

● Valid syntax for the CSS rule set, selectors (class, id, elements, and pseudo- class)
○ There are a few different groupings of selectors, and knowing which type of
○
selector you might need will help you to find the right tool for the job.
● Type selectors match elements by node name.
In other words, it selects an HTML tag/element in your document
● Also the * selector selects all elements.
● A CSS selector selects the HTML element(s) you want to style.
○ Using CSS class selectors allows you to set up rules to format
entire classes of HTML elements, specific elements in a class,
or single elements
○ To select elements with a specific class, write a period (.) character,
followed by the name of the class.
● ID selectors target an element that has a specific value for its id attribute:
○ an ID selector is a name preceded by a hash character (“#”).
○ Attribute selectors give you different ways to select elements based on the
presence of a certain attribute on an element:
● For example: a[title] { } would probably apply its conditions on
an <a> element with a title attribute, in which the
<a> anchor element is used to create hyperlinks in an HTML document.
○ You can even make a selection based on the presence of an attribute with a
particular value:
● For example: a[href="https://example.com"]{} would probably apply its conditions
on an <a> element with the specific value href matching "https://example.org”
○ The <a> tag defines a hyperlink, which is used to link from one page
to another.
○ Here is how to use an image as a link:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>
○ Here is how to open a link in a new browser window:
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>
○ Here is how to link to an email address:
<a href="mailto:someone@example.com">Send email</a>
○ Here is how to link to a phone number:
<a href="tel:+4733378901">+47 333 78 901</a>
○ Here is how to link to another section on the same page:
<a href="#section2">Go to Section 2</a>

○ Here is how to link to a JavaScript:
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
○ Here some attributes used :

■ The download attribute specifies that the target will be
downloaded when a user clicks on the hyperlink
■ The most important attribute of the <a> element is the href
attribute, which specifies the URL of the page the link goes to.
■ The hreflang attribute specifies the language of the linked
document.
■ The media attribute specifies what media/device the linked
document is optimized for.
■ The ping attribute specifies a space-separated list of URLs to
which, when the link is followed, post requests with the body
ping will be sent by the browser (in the background).
● Typically used for tracking.
■ The referrerpolicy attribute specifies which referrer information
to send with the link.
■ The rel attribute specifies the relationship between the
current document and the linked document.
■ The target attribute specifies where to open the linked document
■ The type attribute specifies the media type of the linked document
○ Tip: If the <a> tag has no href attribute, it is only a placeholder

for a hyperlink.
○ Tip: A linked page is normally displayed in the current browser window,
unless you specify another target.
○
○ By default, links will appear as follows in all browsers:
■ An unvisited link is underlined and blue
■ A visited link is underlined and purple
■ An active link is underlined and red
○ Pseudo-classes are selectors that select elements that are in a specific state
and styles certain states of an element.
● For example: The :hover pseudo-class in a:hover { } for example selects an
element only when it is being hovered over by the mouse pointer.
○ Pseudo-elements select a certain part of an element rather than the element itself.
● For example, the ::first-line in p::first-line { } always selects the first line of text
inside an element ( <p>), acting as if a <span> was wrapped around
the first formatted line and then selected.
3. Document Structure using HTML

3.1 Construct and analyze markup to structure content and organize data
● Table tags (table, tr, th, td), h1-h6, p, br, hr, div, span, ul, ol, li
○ Table Cells are defined by a <td> and a </td> tag.
■ td stands for table data.
■ Everything between <td> and </td> are the content of the table cell.
○ A <span> element which is used to color a part of a text

■ The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
■ The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id
attribute.
■ The <span> tag is much like the <div> element, but <div> is a block-level element and <span>
is an inline element.
○ Use the <hr> tag to define thematic changes in the content:

■ The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
■ The <hr> element is most often displayed as a horizontal rule that is used to separate content
(or define a change) in an HTML page.
■ Most browsers will display the <hr> element with the following default values:
● display: block;
● margin-top: 0.5em;
● margin-bottom: 0.5em;
● margin-left: auto;
● margin-right: auto;
● border-style: inset;
● border-width: 1px;
○ The <br> tag inserts a single line break.

■ The <br> tag is useful for writing addresses or poems.
■ The <br> tag is an empty tag which means that it has no end tag.
■ Note: Use the <br> tag to enter line breaks, not to add space between paragraphs.
○ The <div> tag defines a division or a section in an HTML document.

■ The <div> tag is used as a container for HTML elements - which is then styled with CSS or
manipulated with JavaScript.
■ The <div> tag is easily styled by using the class or id attribute.
■ Any sort of content can be put inside the <div> tag!
■ By default, browsers always place a line break before and after the <div> element.
■ Most browsers will display the <div> element with the following default values:
● display: block;
○ Table Rows start with a <tr> and end with a </tr> tag.
■ tr stands for table row.
○ Table Headers sometimes you want your cells to be table header cells. In those cases use the <th> tag
instead of the <td> tag:
■ th stands for table header.
○ HTML tables can have cells that span over multiple rows and/or columns.
■ To make a cell span over multiple rows, use the rowspan attribute:
● The value of the rowspan attribute represents the number of rows to span.
■ To make a cell span over multiple columns, use the colspan attribute
● The value of the colspan attribute represents the number of columns to span.
○ HTML tables can have borders of different styles and shapes.

■ To avoid having double borders, set the CSS border-collapse property to collapse.
● This will make the borders collapse into a single border:
■ To add a border, use the CSS border property on table, th, and td elements
■ If you set a background color of each cell, and give the border a white color (the same as the
document background), you get the impression of an invisible border
■ With the border-radius property, the borders get rounded corners
■ Skip the border around the table by leaving out table from the css selector
■ With the border-color property, you can set the color of the border.
■ With the border-style property, you can set the appearance of the border.
● The following values are allowed:The following values are allowed:
○ Dotted
○ Dashed
○ Solid
○ Double
○ Groove
○ Ridge
○ Inset
○ Outset
○ None
○ Hidden
3.2 Construct and analyze markup that uses HTML5 semantic elements
● Semantic tags (header, nav, section, article, aside, footer, details, summary, figure, caption)
● Semantic HTML tags define the meaning of the content they contain.
○ tags like <header>, <article>, and <footer> are semantic HTML tags. They clearly indicate the role of
the content they contain.
■ The <footer> tag defines a footer for a document or section.
■ A <footer> element typically contains:

● authorship information
● copyright information
● contact information
● Sitemap
● back to top links
● related documents
■ You can have several <footer> elements in one document.
■ Most browsers will display the <footer> element with the following default values:
● display: block;
○ On the other hand, tags like <div> and <span> are typical examples of non-semantic HTML elements
and serve only as content holders given no indication as to what type of content they contain
■ The <div> element is a block-level element
■ A <span> element which is used to color a part of a text
○ <nav> is used to store both internal and external hyperlinks

■ It can be nested within the <header> tag, but secondary navigation <nav> tags are also
commonly used elsewhere on the page.
○ <caption> is used to give a title to a table
○ The <section> tag defines a section in a document.

■ Most browsers will display the <section> element with the following default values:
● display: block;
○ The <article> tag specifies independent, self-contained content.

■ An article should make sense on its own and it should be possible to distribute it independently
from the rest of the site.
■ Potential sources for the <article> element:

● Forum post
● Blog post
● News story
■ Note: The <article> element does not render as anything special in a browser. However, you
can use CSS to style the <article> element.
■ Most browsers will display the <article> element with the following default values:
● display: block;
○ The <aside> tag defines some content aside from the content it is placed in.
■ The aside content should be indirectly related to the surrounding content.
■ The <aside> content is often placed as a sidebar in a document.
■ Note: The <aside> element does not render as anything special in a browser. However, you can
use CSS to style the <aside> element (see example below).
■ Most browsers will display the <aside> element with the following default values:
● display: block;
○ The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
■ While the content of the <figure> element is related to the main flow, its position is independent
of the main flow, and if removed it should not affect the flow of the document.
■ Most browsers will display the <figure> element with the following default values:
● display: block;
● margin-top: 1em;
● margin-bottom: 1em;
● margin-left: 40px;
● margin-right: 40px;
3.3 Construct and analyze markup that implements navigation

● Target, anchor (a href), bookmark, relative vs. absolute links, navigating simple folder hierarchies, map, area
○ A relative link or URL only contains the path following your domain.
○ A file path describes the location of a file in a web site's folder structure.
■ For simple folder hierarchies, the folder name needs to precede the webpage name in a
hyperlink if the folder is below the webpage in the hierarchy of the website.
■ However, if the folder is above the webpage in the hierarchy, two dots and a backslash need to
be placed in front of the folder name.
■ A relative file path points to a file relative to the current page.

● When using relative file paths, your web pages will not be bound to your current base
URL. All links will work on your own computer (localhost) as well as on your current
public domain and your future public domains.
● A relative link is a hyperlink located within the same website from the HTML document
from where the link originates.
■ An absolute file path is the full URL to a file

● An absolute link is a hyperlink in which the destination is not in the same website of the
webpage from which the link originates.
■ File paths are used when linking to external files, like:

● Web pages
● Images
● Style sheets
● JavaScripts
○ The target attribute specifies where the linked document will open when the link is clicked.
■ _blank opens the linked document in a new window or tab
■ _self opens the linked document in the same frame as it was clicked (this is default)
■ _parent opens the linked document in the parent frame
■ _top opens the linked document in the full body of the window
■ framename opens the linked document in the named iframe
○ The <map> tag is used to define an image map.
■ An image map is an image with clickable areas.
■ The <map> element contains a number of <area> elements, that define the clickable areas in
the image map.
■ The <map> tag doesn’t require attributes for latitude and longitude.
○ Creating bookmarks in Html can be useful if a webpage is very long.
■ A bookmark is a type of hyperlink that navigates to a specific location on a webpage.

● This can be a location on the same webpage as the hyperlink or to a specific location on
a different page.
■ To create a bookmark - first, use the id attribute to define bookmarks in a page. Creating a
hyperlink to the id will then jump to the page!
■ The location for the bookmark must be defined using the anchor (a) tag and the name attribute.
Then, the hyperlink uses the # symbol in front.
3.4 Construct and analyze markup that uses form elements
● Form attributes, action, method, submission methods, input types and restrictions, select, textarea, button,
option, label
○
● The HTML Label tag can be associated to a form-control either by nesting the control within it or by matching
the value of the label's for attribute to the value of a control's id attribute.
○ The Label tag is necessary to showcase what the field represents on the form you are creating and
ultimately displaying
■ The content that goes inside of a label should:
● Describe its companion input.

○ A label wants to show everyone that it belongs with its input partner.
● Be visible.
○ A label can be clicked or tapped to focus its input.
■ The extra space it provides to interact with the input is beneficial because
it increases the tap or click target.
● Only contain plain text.

○ Don’t add elements like headings or links.
○ Only plain text should be included inside a label.

○ Avoid inserting things such as headings, or interactive elements such as links.
■ Not all screen readers will announce a label correctly if it contains
something other than plain text.
■ Also, if someone wants to focus an input by clicking its label, but that label
contains a link, they may click the link by mistake.
○ The lack of a semantic label and input combination makes it much harder for all sorts of people to
complete forms.
○ A datalist with pre-defined options (connected to an <input> element):
■ A datalist tag creates a prepopulated list of possible answers in an input form.

● This can help users use values you want in a form field without having to display
a drop-down list right away, as is the case with a select tag.
● The <datalist> element's id attribute must be equal to the <input> element's list attribute
(this binds them together).
○ There are two ways to pair a label and an input.
■ One is by wrapping the input in a label (implicit)

■ By adding a for attribute to the label and an id to the input (explicit).
○ Not all inputs need labels
■ An input with a type="submit" does not need a label — the value attribute acts as the accessible
label text instead.
■ <input type="submit">
● <input type="submit"> defines a button for submitting form data to a form-handler.
● The form-handler is typically a server page with a script for processing input data.
○ The form-handler is specified in the form's action attribute:
■ <input type=”button”>
● An input with a type="button" does not need a label — the value attribute acts as the
accessible label text instead.
○ The <label> tag defines a label for several elements:
■ <input type="color">
■ <input type="date">
● All date and time controls can be constrained using the min and max attributes, with
further constraining possible via the step attribute (whose value varies according to input
type).
●
●
■ <input type="datetime-local">
■ <input type="email">
● You can use the multiple attribute in combination with the email input type to allow
several email addresses to be entered in the same input (separated by commas)
● You can also use the step attribute to set the increment increase and decrease caused
by pressing the spinner buttons.
● To allow float numbers, specify step="any"
● If omitted, the step value defaults to 1, meaning only whole numbers are valid.
■ <input type="file">
■ <input type="month">
■ <input type="number">
● With the number input type, you can constrain the minimum and maximum values
allowed by setting the min and max attributes.
■ <input type="password">
● <input type="password"> defines a password field:
● The characters in a password field are masked (shown as asterisks or circles).
■ <input type="radio">
■ <input type="range">
■ <input type="search">
■ <input type="tel">
■ <input type="text">
● <input type="text"> defines a single-line text input field:
■ <input type="time">
● All date and time controls can be constrained using the min and max attributes, with
further constraining possible via the step attribute (whose value varies according to input
type).
■ <input type="url">
■ <input type="week">
■ <meter>
■ <progress>
■ <select>
■ <textarea>
○ Different attributes for the HTML <form> element
■ The global attributes are attributes that can be used with all HTML elements: These are global
attributes:
● The accesskey attribute specifies a shortcut key to activate/focus an element

○ In terms of input attributes, it can be used to improve form accessibility
● The class attribute specifies one or more classnames for an element (refers to a class in
a style sheet)
● The contenteditable attribute specifies whether the content of an element is editable or

not
● The data-* attribute is used to store custom data private to the page or application
● The dir attribute specifies the text direction for the content in an element
● The draggable attribute specifies whether an element is draggable or not
● The enterkeyhint attribute specifies the text of the enter-key on a virtual keyboard
● The hidden attribute specifies that an element is not yet, or is no longer, relevant
● The id attribute specifies a unique id for an element
● The inert attribute specifies that the browser should ignore this section
● The inputmode attribute specifies the mode of a virtual keyboard
● The lang attribute specifies the language of the element's content
● The popover attribute specifies a popover element
● The spellcheck attribute specifies whether the element is to have its spelling and
grammar checked or not
● The style attribute specifies an inline CSS style for an element
● The tabindex attribute specifies the tabbing order of an element

○ improves form accessibility
● The title attribute specifies extra information about an element
● The translate attribute specifies whether the content of an element should be translated
or not
■ The action attribute defines the action to be performed when the form is submitted.
● Usually, the form data is sent to a file on the server when the user clicks on the submit
button.
● Tip: If the action attribute is omitted, the action is set to the current page.
■ The target attribute specifies where to display the response that is received after submitting the
form.
● The target attribute can have one of the following values:

○ The _blank attribute has the response is displayed in a new window or tab
○ The _self attribute has the response is displayed in the current window
■ The default value is _self which means that the response will open in the
current window.
○ The _parent attribute has the response is displayed in the parent frame
○ The _top attribute has the response is displayed in the full body of the window
○ The framename attribute has the response is displayed in a named iframe
■ The method attribute specifies the HTTP method to be used when submitting the form data.
● The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").
● The default HTTP method when submitting form data is GET.
■ The autocomplete attribute specifies whether a form should have autocomplete on or off.
● When autocomplete is on, the browser automatically complete values based on values
that the user has entered before.
■ The novalidate attribute is a boolean attribute.

● When present, it specifies that the form-data (input) should not be validated when
submitted.
■ The accept-charset attribute specifies the character encodings used for form submission
■ The enctype attribute specifies how the form-data should be encoded when submitting it to the
server (only for method="post")
■ The name attribute specifies the name of the form
■ The rel attribute specifies the relationship between a linked resource and the current document
○ HTTP Request Methods
■ The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients
and servers.
● HTTP works as a request-response protocol between a client and server
● HTTP Methods:
○ GET
■ One of the two most common
■ GET is used to request data from a specified resource.
■ can be cached
■ remain in the browser history
■ can be bookmarked
■ should never be used when dealing with sensitive data
■ have length restrictions
■ less secure compared to POST because data sent is part of the URL
● Never use GET when sending passwords or other sensitive
information!
■ Parameters remain in browser history
■ Only ASCII characters allowed in terms of data type
■ Data is visible to everyone in the URL
■ are only used to request data (not modify)
○ POST
■ One of the two most common
■ The data sent to the server with POST is stored in the request
body of the HTTP request
■ are never cached
■ calling a POST request repeatedly have side effects of creating the same
resource multiple times.
■ Always use POST if the form data contains sensitive or personal
information!
■ No restrictions on data type.
● Binary data is also allowed
■ Parameters are not saved in browser history
■ do not remain in the browser history
■ cannot be bookmarked
■ POST is a little safer than GET because the parameters are not stored in
browser history or in web server logs
■ Data is not displayed in the URL
■ have no restrictions on data length
● can be used to send large amounts of data.
■ Data will be re-submitted if website is reloaded and alerts the user that
the data are about to be re-submitted
○ PUT
■ used to send data to a server to create/update a resource.
■ PUT requests are idempotent.
● calling the same PUT request multiple times will always produce
the same result.
○ DELETE
■ The DELETE method deletes the specified resource.
● The <form> tag is used to create an HTML form for user input.
○ Form controls can be grouped by enclosing them with the fieldset element.
■ The fieldset tag allows a user to group fields on a form to make the form user-friendly.
● It defines a box around a set of fields.
■ All controls within a given fieldset are then related.

● The first element inside the fieldset should be a legend element, which provides a label
for the group
● Fieldsets can be nested if desired, although this can lead to confusion if overdone.
○ The <form> element can contain one or more of the following form elements:
■ <input>
● The <input> tag specifies an input field where the user can enter data and can be
displayed in several ways, depending on the type attribute. (Button, checkbox, color,
data, datetime-local, email, file, hidden, image, month number password, radio range,
reset, search, submit, tel, text, time, url, & week.)
■ <textarea>
● The <textarea> tag defines a multi-line text input control and is often used in a form, to
collect user inputs like comments or reviews.
● The size of a text area is specified by the cols and rows attributes (or with CSS).
■ <button>
● The <button> tag defines a clickable button.
■ <select>
● The <select> element is used to create a drop-down list and is most often used in a
form, to collect user input.
● The name attribute is needed to reference the form data after the form is submitted (if
you omit the name attribute, no data from the drop-down list will be submitted).
● The id attribute is needed to associate the drop-down list with a label.
● The <option> tags inside the <select> element define the available options in the
drop-down list.
■ <option>
● The <option> tag defines an option in a select list.
● <option> elements go inside a <select>, <optgroup>, or <datalist> element.
● There are two ways to create option tags:
○ they can be individual option tags
○ They can be grouped into group option tags.
■ <optgroup>
● The <optgroup> tag is used to group related options in a <select> element (drop-down
list).
● Group option (optgroup) tags take individual option tags and group them in similar
groups to make options easy to read.
●
■ <fieldset>
● The <fieldset> tag is used to group related elements in a form.
● The <fieldset> tag draws a box around the related elements.
■ <label>
● The <label> tag defines a label for several elements: checkbox, color, date,
datetime-local, email, file, month, number, password, radio, range, search, tel, text, time,
url, week, <meter>, <progress>, <select>,<textarea>.
○
■ <output>
● The <output> tag is used to represent the result of a calculation (like one performed by a
script).
● Some attributes used in output tags are:
○ The for attribute specifies the relationship between the result of the calculation,
and the elements used in the calculation.
○ The form attribute specifies which form the output element belongs to.
○ The name attribute specifies a name for the output element.
4. Multimedia Presentation using HTML
4.1 Construct and analyze markup that displays images
● img and picture elements and their attributes
○ Elements, such as images, are not embedded within a webpage.
■ They are linked from an external source to a webpage.
■ With images, the img tag is used to indicate an image on a webpage and the source (src)
attribute is used to define the location of the image.
■ If this image is in the same folder as the page itself, the file name is all that is needed.
● Otherwise, the path to the file needs to be defined
.
■ If the image is on the same website but in an images folder adjacent to the file, the path needs
to have the folder name, a backslash, and then the file.
4.2 Construct and analyze markup that plays video and audio
● video, audio, track, source, iframe
○ An HTML iframe is used to display a web page within a web page.
■ The HTML <iframe> tag specifies an inline frame.

● An inline frame is used to embed another document within the current HTML document.
■ Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by
screen readers to read out what the content of the iframe is.
● for screen readers
■ Use the height and width attributes to specify the size of the iframe.
● The height and width are specified in pixels by default
● you can also add the style attribute and use the CSS height and width properties
■ By default, an iframe has a border around it.

● To remove the border, add the style attribute and use the CSS border property
○ Use border:none; to remove the border around the iframe
● With CSS, you can also change the size, style and color of the iframe's border
■ An iframe can be used as the target frame for a link.

● The target attribute of the link must refer to the name attribute of the iframe
● The <track> tag can be used to add closed captioning or subtitles to a video.
○ The <track> element is used as a child of an <audio> or <video> element and adds a time-based data
source to the parent media element.
■ For example, the <track> element can be used to add timed subtitles to a video and closed
captions to audio content.
○ This element is used to specify subtitles, caption files or other files containing text, that should be
visible when the media is playing.
○ Tracks are formatted in WebVTT format (.vtt files).
○ Some optional attributes within a track element are:
■ The default attribute specifies that the track is to be enabled if the user's preferences do not
indicate that another track would be more appropriate
■ The kind attribute specifies the kind of text track
■ The label attribute specifies the title of the text track
■ The src attribute is required & specifies the URL of the track file
■ The srclang attribute specifies the language of the track text data (required if kind="subtitles")
■
● The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
○ The <audio> tag contains one or more <source> tags with different audio sources. The browser will
choose the first source it supports.
○ The text between the <audio> and </audio> tags will only be displayed in browsers that do not support
the <audio> element.
○ There are three supported audio formats in HTML: MP3, WAV, and OGG.
○ Some usable attributes:
■ The autoplay attribute specifies that the audio will start playing as soon as it is ready
■ The controls attribute specifies that audio controls should be displayed (such as a play/pause
button etc)
■ The loop attribute specifies that the audio will start over again, every time it is finished
■ The muted attribute specifies that the audio output should be muted
■ The preload attribute specifies if and how the author thinks the audio should be loaded when the
page loads
■ The src attribute specifies the URL of the audio file
● The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>,
and <picture>.
○ The srcset attributes contain the path to the image to display and is required when <source> is used in
<picture>. It will specify the URL of the image to use in different situations.
○ The <source> tag allows you to specify alternative video/audio/image files which the browser may
choose from, based on browser support or viewport width.
■ The browser will choose the first <source> it supports.
○ Media accepts any valid media query that would normally be defined in a CSS
○ Some usable attributes:
■ The media attribute accepts any valid media query that would normally be defined in a CSS
■ The sizes attribute specifies image sizes for different page layouts
■ The src attribute is required when <source> is used in <audio> and <video> & specifies the URL
of the media file
■ The srcset attribute is required when <source> is used in <picture> & specifies the URL of the
image to use in different situations.
■ The type attribute specifies the MIME-type of the resource
5. Webpage Styling using CSS
5.1 Construct and analyze styles that position content

● Positioning (float, relative, absolute, static, and fixed) max-width, overflow, height, width,
align, display, inline vs. block, visibility, box model, margins and padding
○ Static
■ HTML elements are positioned static by default.
■ Static positioned elements are not affected by
the top, bottom, left, and right properties.
■ An element with position: static; is not positioned in any special way;
it is always positioned according to the normal flow of the page:
○ Relative
■ An element with position: relative; is positioned relative to its normal position.
■ Setting the top, right, bottom, and left properties of a relatively-positioned
element will cause it to be adjusted away from its normal position.
■ Other content will not be adjusted to fit into any gap left by the element.
○ Fixed
■ An element with position: fixed; is positioned relative to the viewport,
which means it always stays in the same place even if the page is scrolled.
The top, right, bottom, and left properties are used to position the element.
■ A fixed element does not leave a gap in the page where it would
normally have been located.
○ Absolute
■ An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the viewport,
like fixed).
■ However; if an absolute positioned element has no positioned ancestors,
it uses the document body, and moves along with page scrolling.
■ Absolute positioned elements are removed from the normal flow,
and can overlap elements.
○ Sticky
■ An element with position: sticky; is positioned based on the user's
scroll position.
■ A sticky element toggles between relative and fixed,
depending on the scroll position. It is positioned relative until a given
offset position is met in the viewport - then it "sticks" in place (like position:fixed).
5.2 Construct and analyze styles that format text

● font-family, color, font-style, font-size, font-weight, font-variant, link colors, text formatting, text alignment, text
decoration, indentation, line-height, word-wrap, and letter-spacing
5.3 Construct and analyze styles that format backgrounds and borders
● border-color, border-style, border-width, background properties, colors
5.4 Construct and analyze styles that create a simple responsive layout
● Units of measurement (percentages, pixels, em, vw, vh), viewport and media query, frameworks and templates,
working with breakpoints, grids
○ Breakpoints are one of the most important debugging techniques in your developer's toolbox. You set
breakpoints wherever you want to pause debugger execution.
■ For example, you may want to see the state of code variables or look at the call stack at a
certain breakpoint.
6. Accessibility, Readability, and Testing
6.1 Construct well-formed HTML and CSS markup that conforms to industry best practices
● Reusing rules and rule sets, commenting, web-safe fonts, cross-platform usability, separation of structure
(HTML) and style (CSS)
○ The /* */ comment syntax is used for both single and multiline comments.
6.2 Apply accessibility principles and evaluate content accessibility

● Text alternatives, color contrast and usage, legibility of typography, tab order, text resizing, text hierarchy,
translate
6.3 Evaluate the structural integrity of HTML and CSS markup

● Syntax errors, tag mismatch, cascading issues

Coding Study Guide PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Coding Study Guide PDF

Uploaded by

Copyright:

Available Formats

1.

1.1 Construct markup that uses metadata elements

● Meta can be used to draw attention to your homepage in search engines

● The <script> tag is used to embed a client-side script (JavaScript).

● The <meta> tag defines metadata about an HTML document.

1.2 Construct well-formed page markup

○ The head tag should always stay above body tag

■ An external style sheet can be written in any text editor,

2.2 Construct and analyze rule sets

○ Here is how to use an image as a link:

○ Here is how to open a link in a new browser window:

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

○ Here is how to link to an email address:

<a href="mailto:someone@example.com">Send email</a>

○ Here is how to link to a phone number:

<a href="tel:+4733378901">+47 333 78 901</a>

○ Here is how to link to another section on the same page:

<a href="#section2">Go to Section 2</a>

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

○ Here some attributes used :

○ Tip: If the <a> tag has no href attribute, it is only a placeholder

3. Document Structure using HTML

○ A <span> element which is used to color a part of a text

○ Use the <hr> tag to define thematic changes in the content:

○ The <br> tag inserts a single line break.

○ The <div> tag defines a division or a section in an HTML document.

○ HTML tables can have borders of different styles and shapes.

■ The <footer> tag defines a footer for a document or section.

■ A <footer> element typically contains:

■ You can have several <footer> elements in one document.

○ <nav> is used to store both internal and external hyperlinks

○ <caption> is used to give a title to a table

○ The <section> tag defines a section in a document.

○ The <article> tag specifies independent, self-contained content.

■ Potential sources for the <article> element:

■ The <aside> content is often placed as a sidebar in a document.

3.3 Construct and analyze markup that implements navigation

■ A relative file path points to a file relative to the current page.

■ An absolute file path is the full URL to a file

■ File paths are used when linking to external files, like:

○ The <map> tag is used to define an image map.

■ An image map is an image with clickable areas.

■ A bookmark is a type of hyperlink that navigates to a specific location on a webpage.

3.4 Construct and analyze markup that uses form elements

● Describe its companion input.

● Only contain plain text.

○ Only plain text should be included inside a label.

○ A datalist with pre-defined options (connected to an <input> element):

■ A datalist tag creates a prepopulated list of possible answers in an input form.

○ There are two ways to pair a label and an input.

■ One is by wrapping the input in a label (implicit)

○ Not all inputs need labels

○ The <label> tag defines a label for several elements:

○ Different attributes for the HTML <form> element

● The accesskey attribute specifies a shortcut key to activate/focus an element

● The contenteditable attribute specifies whether the content of an element is editable or

● The draggable attribute specifies whether an element is draggable or not

● The id attribute specifies a unique id for an element

● The inputmode attribute specifies the mode of a virtual keyboard

● The lang attribute specifies the language of the element's content

● The popover attribute specifies a popover element

● The style attribute specifies an inline CSS style for an element

● The tabindex attribute specifies the tabbing order of an element