Exam practice

• a.HTML: Hypertext Markup Language
• b.WDLC: Web Development Life Cycle
• c.UI: User Interface
• d.W3C: World Wide Web Consortium
• e.UX: User Experience
• f.URL: Uniform Resource Locator
• g.DNS: Domain Name System
• h.RGB: Red, Green, Blue
• i.HTTP: Hypertext Transfer Protocol
• j.JS: JavaScript

DNS (Domain Name System) is the system that translates domain names (such as ntb.gov.np), which people remember, into the IP addresses (such as 203.0.113.25) that computers use to find each other. When a website’s name is typed, the computer asks a DNS server for the IP address of the site’s server, then connects to it, like a phone’s contact list turning a name into a number.

An HTML tag is a predefined command written in angle brackets, < >, that tells the browser how to structure and display the content of a web page, for example <p> for a paragraph or <img> for an image. Most tags are paired, with an opening and a closing tag (<b>…</b>); some are empty (<br>). The tags themselves are not shown on the page.

The <head> tag holds information about the page, which is not shown in the page itself: the title shown on the browser’s tab (<title>), the character encoding and other meta information (<meta>), and links to style sheets and scripts (<style>, <link>, <script>). It comes before the <body>, inside <html>.

An attribute is extra information written inside an HTML opening tag to control or change how the tag behaves. It is a name and a value: name="value", for example href="index.html" in <a href="index.html">, or src and alt in <img src="logo.png" alt="School logo">.

<br> breaks a line: the text after it starts on a new line. It is an empty tag, with no closing tag. (<p>…</p> starts a new paragraph, with space above and below it.)

An empty (unpaired, stand-alone) tag has only an opening tag and no closing tag, because it holds no content; it does one job where it stands. Examples: <br> (new line), <hr> (horizontal line), <img> (image), <input> (a form field).

A container (paired) tag has an opening tag and a closing tag, and the content goes between them; the closing tag has a slash. The opening tag switches its effect on and the closing tag switches it off. Examples: <p>…</p>, <b>…</b>, <table>…</table>.

<!-- your comment here -->

A comment starts with <!-- and ends with -->. The browser ignores everything between them, even over several lines, and doesn’t show it on the page.

(a+b)²: the 2 is shown small and raised, as a superscript (a power).

<tr> (table row) makes one row of a table. It holds that row’s cells, header cells (<th>) or data cells (<td>), and is written inside <table>; a table has as many rows as <tr> tags.

Forms collect data from users and send it to a server to be processed. They are used for logging in, signing up and registering, contact and feedback messages, searching, online applications and exam forms, surveys, orders and payments. A form (<form>) holds input fields: text boxes, passwords, radio buttons, check boxes, drop-down lists, text areas, and submit and reset buttons.

HTML (Hypertext Markup Language) is the standard markup language for making web pages. It uses predefined tags in angle brackets to describe the structure of a page: its headings, paragraphs, lists, links, images, tables and forms. Hypertext is text with links; markup is the tags added to the text. HTML doesn’t calculate or decide anything (it isn’t a programming language); a browser reads it and draws the page. It was created by Tim Berners-Lee at CERN in 1990, and the WHATWG and W3C look after it today.
Uses (any three):

• creating and designing the basic layout of web pages;
• creating and formatting the text on web pages (headings, paragraphs, bold…);
• embedding images, graphics, sounds and videos;
• adding tables, forms and hyperlinks;
• giving the structure of web apps and emails.

Every HTML document has four main parts, nested inside each other:

<!DOCTYPE html><html lang="en">  <head>    <title>Title of the page</title>  </head>  <body>    The content of the page goes here.  </body></html>

• <!DOCTYPE html>: the doctype declaration, on the first line, says the document is a modern HTML page.
• <html> … </html>: holds the whole document.
• <head> … </head>: information about the page, not shown in it: the title (shown on the browser’s tab), meta information, links to style sheets and scripts.
• <body> … </body>: everything shown on the page: text, headings, images, links, tables and forms.

The web development life cycle (WDLC) is a systematic, planned process for creating and maintaining a website. It makes development faster and easier, keeps users’ needs in view, and gives the developers, designers and client a shared roadmap. Its stages:

1. Gathering information: the target audience, the content needed and the site’s structure are found out.
2. Planning: a basic layout and structure of the site (sitemap, wireframes) are made.
3. Design and layout: fonts, colors and images are chosen to suit the content or brand.
4. Content creation: the real text, images, audio and videos are prepared.
5. Development: developers write the code that turns the design and content into a working site.
6. Testing: errors are found and fixed; every page, link and form is checked on different devices and browsers.
7. Maintenance and updating: the content is kept up to date and the site kept working and secure; when it must change, the cycle starts again.

UI (user interface) is how a website or app looks, its buttons, colors and layout; UX (user experience) is how using it feels. They matter because:

• an attractive design increases user engagement: people stay and come back;
• a good experience means users can finish their tasks easily and quickly;
• a site that is easy to use and navigate works for everyone, new users, older people and people with disabilities;
• a unique, consistent design builds the brand and users’ trust;
• designing and testing early saves development time and cost, since problems are fixed before the site is built;
• happy users bring more visits, sales and good reviews.

The <font> tag is a paired tag: the text between <font> and </font> is shown in the font face, size and color set by its attributes.

<font face="Arial" size="5" color="#800000">Talent is what you do.</font>

Its attributes:

• face: the name of the font, such as Arial or Times New Roman;
• size: the size of the text, from 1 (smallest) to 7 (biggest); the default is 3;
• color: the color of the text, as a name (red) or a hexadecimal code (#FF0000).

The <font> tag is obsolete in today’s HTML: browsers still show it, but new pages set fonts with CSS, such as p { font-family: Arial; font-size: 24px; color: maroon; }.

The <input> tag’s type attribute decides the kind of field:

• text (the default): a single-line text box, for a name or address;
• password: a text box that shows dots instead of the letters typed;
• radio: a radio button, to choose one option from a group with the same name (gender);
• checkbox: a check box, to choose any number of options (hobbies);
• submit: a button that sends the form’s data to the server;
• reset: a button that clears the form;
• file: a button to choose a file to upload;
• button: a plain button for a script;
• newer types: email, number, tel, date, color.

Other form elements: <textarea> (a box of several lines), <select> with <option> (a drop-down list) and <button>.

The <div> (division) tag is a block-level container that divides a web page into logical sections and groups other elements together; it shows nothing on its own, but can be styled with CSS and given an id or class.

<div style="border: 1px solid black; padding: 10px;">  <h2>Notices</h2>  <p>School will be closed on Friday.</p></div>

Importance:

• Grouping content: related elements stay together in one box.
• Layout and structure: the page is divided into header, menu, columns and footer.
• Responsive design: with CSS, the sections rearrange for phones and computers.
• Styling with CSS: one rule styles a whole section.
• JavaScript interaction: a script can find a div by its id and change, show or hide it.

CSS (Cascading Style Sheets) is a style sheet language that works with HTML to set the look and layout of web pages: colors, fonts, sizes, spacing, borders, backgrounds and positions. A CSS rule has a selector (which elements) and declarations (property: value;). CSS can be added inline, internally or from an external .css file.
Advantages:

• it separates content (HTML) from design (CSS);
• one external style sheet styles many pages, which saves time and gives a consistent look;
• changes are easy: edit one rule and every page changes;
• pages are lighter and faster, with less repeated code;
• it makes responsive pages that fit phones, tablets and computers, and print-friendly pages;
• it gives more control of design than HTML’s old attributes.

There are three types:

1. Inline CSS: written in the style attribute of one element, and styles only that element. <h1 style="color: blue;">Hello</h1>. Quick for one change, but hard to maintain.
2. Internal CSS: written in a <style> tag in the page’s <head>, and styles the elements of that one page.

<style>  p { color: red; }</style>

3. External CSS: written in a separate .css file and linked in the <head> with <link rel="stylesheet" href="mystyle.css">. One file can style every page of a website, which keeps the look consistent and makes changes easy.

When they disagree, inline CSS wins over internal and external.

CSS selectors are the part of a CSS rule that finds, or selects, the HTML elements the rule styles. Types:

• element selector, by tag name: p { color: red; };
• id selector, # and the id, for one element: #header { … };
• class selector, . and the class, for every element with that class: .check { … };
• universal selector, *, for every element: * { margin: 0; }.

They are important because they let us style exactly the elements we want, one, a group or all, from one place, without changing the HTML. One rule can style many elements at once, keeping the design consistent and the code short, and every CSS rule needs one.