Markup and HTML 5 coding
What is the difference between head, header, and heading elements?
"<head>" appears before the "<body>" of a web page. It contains metadata that provides the the browser with information about the page. header contains introductory material, such as the title, date, author, or summary. "Headings" are <h1>, <h2>, ... tags. They provide the titles and subtitles that describe the content and structure of the web page.
Identify the steps in the Web Development Project Cycle and describe each.
1) Information Gathering, 2) Planning, 3) Design, 4) Content Writing and Assembly, 5) Coding, 6) Testing, Review and Launch, 7) Maintenance.
What are the html versions
1.0, 2, 3.2, 4.01, 5
roles of URLs
1inking to another document or resource, (see the A and LINK elements). linking to an external style sheet or script (see the LINK and SCRIPT elements). images, objects and applets for inclusion in a page, (see the IMG, OBJECT, APPLET and INPUT elements). image maps (see the MAP and AREA elements). form submission (see FORM). frames (see the FRAME and IFRAME elements). citing an external reference (see the Q, BLOCKQUOTE, INS and DEL elements). referring to metadata conventions describing a document (see the HEAD element).
Comments in HTML
<!--abc123-->
Know the difference between block-level elements and inline/text-level elements.
A block-level element always starts on a new line. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). A block level element has a top and a bottom margin, whereas an inline element does not. <div> is block An inline element does not start on a new line. An inline element only takes up as much width as necessary. This is a <span> element inside a paragraph.
What's the document root?
A directory that's stored on your host's servers and is designated for holding webpages The document root is the folder where the website files for a domain name are stored.
What is an external hyperlink?
A hyperlink on a Web page that points to a page on a different website. On a blog, a link is typically considered external if it points to another blog, even though both blogs are hosted on the same blog site. Contrast with internal link.
What is markup language?
A markup language is a computer language that uses tags to define elements within a document.
Identify 5 semantic HTML elements and their purpose.
A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content. <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>
Know and identify a sitemap
A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Having a sitemap isn't compulsory, but it does help search engines find and index new websites or updated webpages in a faster way. A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to crawl your site more efficiently. itemap is a categorisation of pages, a kind of table of contents outlining what pages relate to which content on a website. A sitemap allows users to see the layout of your pages and the order of their hierarchy. If you open a book, it will begin with a title, chapter and title names of each of the chapters, showing the reader where to locate what information. https://www.experienceux.co.uk/wp-content/uploads/2015/06/wireframe_example_small.jpg
What is a table header
A table header is a row at the top of a table used to label each column. For example, in the below table there are three columns with a "Name," "Date of Birth," and "Phone" header.
What is an absolute link?
Absolute hyperlink. An absolute hyperlink is a hyperlink that contains the full address of the destination file or of the Web site. The following address is an example of a full address in an absolute hyperlink: http://www.microsoft.com/support.
What's an HTML element.
An HTML element is defined by a start tag, some content, and an end tag:
what is an embedded video
An embedded video lets you borrow the video from another platform. Visitors can watch the video on your website without leaving the current page. ... When readers click the link, they are redirected to the page where the video is hosted. If you want to include videos on a website, the better option is to embed videos. :Takes up computer resources the more embedded videos a site has.
What is an internal link (also known as a bookmark)?
An internal link is a type of hyperlink on a web page to another page or resource, such as an image or document, on the same website or domain.
What elements are nested within a head element?
CSS meta tags title base link
What is CSS and how is it used in web development?
Cascading Styling Sheets. Serves to reduce the size of HTML files, organized ways to provide homogeneity in web page design. Caters appearance, style.
Know and understand the difference between a container tag and empty tag
Container tag consists of opening tag+content+closing tag . While empty tag is tag without content or a closing tag. Container tags are used to enclose texts, images etc. Like <body> , <div> etc are container tags as we put some content inside them. <hr> is an empty tag
SSL certificate
Data passed between web servers and clients is encrypted
Know and identify types of empty tags.
Empty tags in HTML are start tags representing DOM Element Nodes that never have a matching end tags, and more importantly, they can only have "attribute". <br>, <link>, <img>, <hr>, <meta>, <source> An empty element is an element from HTML, SVG, or MathML that cannot have any child nodes (i.e., nested elements or text nodes).
Evolution of the Internet
Establishment of a general format for hypertext documents and their URL hyperlinks. URls led to HTML. HTML becomes enriched with CSS, PHP, JavaScript
What is HTML and how is it used in web development?
HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. A designating language. Bridges the divide between human language and computer language.
Difference between HTML and XML.
HTML displays data and describes structure of a webpage. XML stores and transfers data. XML is case sensitive. Attaches info to text. Structure of XML is hierarchy of tags.
What can the web developer do if they need to include a tag within the content of the document, and not have the web browser interpret that tag as HTML?
HTML entities
What is the difference between head, header, and heading elements?
Head tag:The HTML element provides general information (metadata) about the document, including its title and links to/definitions of scripts and style sheets Header tag:The HTML element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.
Identify the following protocols: HTTP, HTTPS, TCP/IP, FTP, and SMTP.
Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. Hypertext Transfer Protocol Secure (HTTPS) is an extension of the Hypertext Transfer Protocol (HTTP). It is used for secure communication over a computer network, and is widely used on the Internet. TCP/IP stands for Transmission Control Protocol/Internet Protocol and is a suite of communication protocols used to interconnect network devices on the internet. TCP/IP is also used as a communications protocol in a private computer network (an intranet or extranet). The File Transfer Protocol (FTP) is a standard communication protocol used for the transfer of computer files from a server to a client on a computer network. SMTP stands for Simple Mail Transfer Protocol, and it's an application used by mail servers to send, receive, and/or relay outgoing mail between email senders and receivers
Which heading element is the same size as default text?
I think it's <h4>
What support was added with HTML 4.01?
It extended the support of cascading styling sheets. an external CSS file could be developed, and this external styling file could be included in HTML itself. HTML 4.01 provided support for further new tags of HTML.
Why is div used so much
It is useful for help fitting something on a page
What is JavaScript and how is it used in web development?
JavaScript is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to web pages, JavaScript gives web pages interactive elements that engage a user.
What is link rot?
Link rot (also called link death, link breaking, or reference rot) is the phenomenon of hyperlinks tending over time to cease to point to their originally targeted file, web page, or server due to that resource being relocated to a new address or becoming permanently unavailable. A link that no longer points to its target, often called a broken or dead link (or sometimes orphan link), is a specific form of dangling pointer.
colspan vs row span
Make up some of the table attributes colspan (td) A table that consists of x rows and y columns will of course contain x times y cells. With the colspan attribute, you can specify that, for a given cell, you want to span it across a number of columns. rowspan is the equivalent of colspan but for rows. With this attribute, you can specify that you want a table cell to be higher than just a single row.
Understand the purpose of MIME.
Multipurpose Internet Mail Extensions MIME allows the exchange of different kinds of data files, including audio, video, images and application programs, via email.
Know and identify a wireframe.
Not dissimilar to an architectural blueprint, a wireframe is a two-dimensional skeletal outline of a webpage or app. Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors. As a wireframe usually represents the initial product concept, styling, color, and graphics are kept to a minimum.
Identify and describe a website file structure.
Note: except for the Project (Root) Folder all files and folders should be (a) lower case, (b) have no spaces in the name, (c) start with a letter or number and not a special character. Project (Root) Folder: This is the main folder for the project and contains ALL other files and folders. On the web it's called the root folder. It's not shown in the image above; consider it the grey box around everything. HTML files: these are all of the files that end with .html. These should be directly in the Project/Root folder and not in any sub folders. Doing that makes it easy to see all of your files and makes all of the paths to resources (images, css files) the same. The only required file is index.html but your sites will all have more .html files. CSS Folder: all .css files go here. In this class we will not write css either in style elements on the web page or in attributes of elements. Instead all CSS will go in external stylesheets and those will be put in the css folder. You will need to have at least one stylesheet called either main.css or style.css. I will generally use main, but some of my tutorials and others use style.css so it's OK if you use that. But don't use both. Other CSS files should have names referring to what they are styling. Images Folder: all images go here (.jpg, .png, .gif, etc). You can name the folder images or img. JavaScript Folder: all JavaScript files go here. They end in .js. You can name the folder javascript or js. https://htmlandcssguidebook.com/html/file-structure.html
What are hyperlinks?
Part of a document readers can click on to take them to a different document
What are HTTP and URLs, and how do the two work together to display a webpage?
Protocols manage communication, URLs are easy to read ip addresses
HTML
Refers to hyperlinks that an HTML page may contain. Markup language refers to way tags are used to define page and elements on a page
Proper use of labels with the elements above will benefit:
Screen reader users (will read out loud the label, when the user is focused on the element) Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area). Tip: The for attribute of <label> must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element. It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the related input element
Know the purpose of Section 508 of the Rehabilitation Act.
Section 508 of the Rehabilitation Act of 1973 (29 USC § 794d) requires that when U.S. Federal government agencies develop, procure, or maintain, information and communication technology (ICT), that it is accessible to persons with disabilities.
Which characteristics of XML indicates it's an extensible markup language?
Set of XML tags are unlimited
What is XML used for
Storing structured data and uses customizable tags
difference between tags and elements
Technically, an HTML element is the collection of start tag, its attributes, an end tag and everything in between. On the other hand an HTML tag (either opening or closing) is used to mark the start or end of an element
<article>
The <article> element specifies independent, self-contained content.
<header>
The <header> element represents a container for introductory content or a set of navigational links.
Know how to insert a thematic break <hr>, formerly known as a horizontal rule.
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. makes a horizontal line going across the page
What's the meta tag
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. Adding the meta tag while making the webpage or website, is a good practice because search engines like Google search for this meta tag in order to understand the information provided by the website. It is also helpful if the user search for a specific website then the search engine result page will display snippets in search results that will provide information related to that website. 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. <head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<section>
The <section> element defines a section in a document. According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading." Examples of where a <section> element can be used: Chapters Introduction News items Contact information A web page could normally be split into sections for introduction, content, and contact information.
Specify how and when to use a span element.
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.
<tr>,<th>,<td>
The <tr> HTML element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
Identify the purpose the W3C Authoring Tool Accessibility Guidelines (ATAG).
The Authoring Tool Accessibility Guidelines (ATAG) 2.0 provides guidelines for designing web content authoring tools that are both more accessible to authors with disabilities (Part A) and designed to enable, support, and promote the production of more accessible web content by all authors
Purpose of markup validation?
The Markup Validation Service is a validator by the World Wide Web Consortium (W3C) that allows Internet users to check pre-HTML5 HTML and XHTML documents for well-formed markup against a document type definition. Markup validation is an important step towards ensuring the technical quality of web pages.
Identify the purpose of the World Wide Web Consortium (W3C).
The W3C mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web.
Identify the purpose of the Web Accessibility Initiative (WAI).
The Web Accessibility Initiative (WAI) is an initiative developed by the World Wide Web Consortium to help make the internet more accessible to people with disabilities
What is the W3C?
The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.
What is the purpose of a div element?
The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc).
Identify four common challenges and solutions regarding web accessibility.
The most common accessibility issues are: Low contrast on text Missing alt text on images Missing link text Ambiguous link text Too many navigation links Empty form labels Unclear form controls Time-Outs can't be controlled
When to use span
The span element is a generic inline element, typically used to apply styling to a portion of inline content. An inline element does not start a new line and only takes up as much space on the page as its content. Span tags are used on small segments of text, links, images, and other HTML elements that appear inline with the surrounding content.
Identify the components of an URL
The syntax used within URLs helps servers determine what type of file you're looking for, where to find that file, and can also pass along several optional parameters to the server Protocol The protocol or scheme of a URL indicates the method that will be used for transmitting or exchanging data. The most familiar scheme is the Hypertext Transfer Protocol (HTTP) or Hypertext Transfer Protocol Secure (HTTPS) for the transmission of HTML files. FTP (for files) and Mailto (for mails) are examples of other types of schemes. In the example URL above, https:// is the URL's secure protocol. subdomain www Domain The domain or hostname of a URL is a user-friendly expression of the Internet Protocol (IP) address of a website. It points to the location of the website's host server. In the example above, the domain is www.example.com. Top Level Domain .com Path The path that follows the domain name inside a URL points to a specific file or other resource location. It can also include a query string. In our example URL, /category-A/subcategory-A1/model-123.html shows the path of the URL, which in this example, ends in a product page. Query The query string, also known as a fragment identifier, is frequently used for internal searches and is commonly preceded by a question mark (?).
What is the difference between the World Wide Web (WWW) and the Internet?
The world wide web, or web for short, are the pages you see when you're at a device and you're online. But the internet is the network of connected computers that the web works on, as well as what emails and files travel across. Think of the internet as the roads that connect towns and cities together. The world wide web contains the things you see on the roads like houses and shops.
Identify the purpose of the table element.
This is the main tag to create a table. Every table begins with a tag and ends with a tag.
What's HTML used for
To markup out content and bridge the divide between human language and computer language
Purpose of CSS
To reduce size of HTML files. Organized ways to provide homogeneity in web page design. Appearance, styling
What is a relative or local link?
URL that includes only the path. We use relative URLs when linking something on the same page that has the link, or the same site. The address of the destination file is also known as the hyperlink base. By keeping all website files in a shared root directory, we make it possible to use relative links between pages and files within the website. Otherwise, the browser has to look for the files the hard way, by reaching out to DNS and looking for an absolute address. This helps pages load faster and makes writing links easier
Know the difference between ADA and Section 508.
Ultimately, ADA protects the civil rights of persons with disabilities participating in interstate commerce; whereas Section 508 is a set of regulations related to access to Government ICT. 508 compliance provides accessibility for digitally published material within government agencies and entities Section 508 is not part of the ADA.Section 508 is an amendment to the Rehabilitation Act of 1973.
What's an XML schema?
Used to validate the structure and content of XML data The purpose of an XML Schema is to define the legal building blocks of an XML document. the elements and attributes that can appear in a document the number of (and order of) child elements data types for elements and attributes default and fixed values for elements and attributes One of the greatest strength of XML Schemas is the support for data types. It is easier to describe allowable document content It is easier to validate the correctness of data It is easier to define data facets (restrictions on data) It is easier to define data patterns (data formats) It is easier to convert data between different data types
What does it mean to make a website accessible?
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can: perceive, understand, navigate, and interact with the Web. contribute to the Web.
What areas can XML be applied?
Web services, database alternatives
When should a table be used?
When using tabular data
W3C
World Wide Web Consortium. Defines and sets standards which defines technical specs. Like how the main parts of a URL are composed
Properties of XML
XML attaches info text. Structure of XML is a hierarchy of tags. XML can be applied to web services, data base alternatives. An XML declaration is a processing instruction located on top that identifies a document at HTML. An XML schema is used to validate the structure and content of XML data. XML was designed to carry data - with focus on what data is HTML was designed to display data - with focus on how data looks XML tags are not predefined like HTML tags are
What is the difference between HTML and XML?
XML is extensible because the extent of the xml tags are unlimited. HTML displays data and describes structure of a webpage. XML stores and transfers data. XML is case sensitive.
Why to use divs.
You'll very often see divs used to group related paragraphs, images, headings, and links. For example, a three-paragraph article may be enclosed in a div, and a navigation menu containing links might be enclosed in another div.. makes it easier to identify different sections of a page and apply styling to them with CSS.
Describe a GUI editor. Name three examples.
a graphical user interface is a way to communicate what you want to a computer application (or computer operating system) using graphical symbols rather than typing the instructions in. Microsoft Windows, macOS, Ubuntu Unity, and GNOME Shell for desktop environments, and Android, Apple's iOS, BlackBerry OS, Windows 10 Mobile, Palm OS-WebOS, and Firefox OS for smartphones.
The basic difference between a domain and a subdomain:
abz.com is the main domain name store.abz.com is a subdomain private.abz.com is a subdomain
WHat is URL
address if a webpage or file on the internet
Identify three attributes used within a meta tag.
charset-Specifies the character encoding for the HTML document content-Specifies the value associated with the http-equiv or name attribute http-equiv-Provides an HTTP header for the information/value of the content attribute name-Specifies a name for the metadata
Identify the purpose of the Web Accessibility Content Guidelines (WCAG).
describes how web content should be created so it will be accessible to people with disabilities. Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. The WCAG documents explain how to make web content more accessible to people with disabilities. Web "content" generally refers to the information in a web page or web application, including: natural information such as text, images, and sounds code or markup that defines structure, presentation, etc.
Know the purpose of the ADA
he Americans with Disabilities Act (ADA) prohibits discrimination against people with disabilities in several areas, including employment, transportation, public accommodations, communications and access to state and local government' programs and services
Html5 introduced tags
header, footer, aside, article, section, nav, video, auidio
the W3C URL for markup validation?
https://validator.w3.org/. This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc
Identify the three types of lists you can create with HTML.
unordered list — used to group a set of related items in no particular order. ordered list — used to group a set of related items in a specific order. description list — used to display name/value pairs such as terms and definitions. <p>Cryptids of Cornwall:</p> <dl> <dt>Beast of Bodmin</dt> <dd>A large feline inhabiting Bodmin Moor.</dd> <dt>Morgawr</dt> <dd>A sea serpent.</dd> <dt>Owlman</dt> <dd>A giant owl-like creature.</dd> </dl>
File
· Collection of data stored in one unit, managed by file system of a storage device
Path
· Defines location of stored data within the file system of a storage device
Folder
· Stores documents and organizes data within the file system of a storage device
