reading-notes

View project on GitHub

Read: 01 Introductory HTML and JavaScript

From the Duckett HTML book:

Introduction (pp.2-11)

-All websites use HTML and CSS.

How People Access the Web??

  1. Browsers -> like Chrome, In order to view a web page.
  2. Web Servers -> the request from a browser is sent to web server (that hosts the website).
  3. Devices.

  4. Screen readers.

    -How the web works?
    1- When we type the domain name in the browser. ->
    2- The computer contacts a DNS. ->
    3- DNS server returns IP to computer allows the browser to contact the web server that hosts the Domain name. ->
    4- The web server sends the web page that requested.
    so, you be able to use the web page.
    –

HTML Chapter 1: “Structure” (pp.12-39)

-HTML (HyperText Markup Language).

  • On the opening tag of the elements, what called Attribute may be there it provides additional information.
  • Attribute made up of two parts: a name and a value.
    Notepad and Notepad++ can be used to create a web page, just make the extension .html
    –
    Some elements
    <body> -> Everything inside this element is shown inside the main browser window.
    <head> -> This contains information about the page (not shown inside).
    <title> ->” Either shown in the top of the browser, or on the tab for that page (on a browser uses tabs).”
    –

    HTML Chapter 8: “Extra Markup” (p.176-199)

    -HTML has different versions.
    -DOCTYPE tells a browser which version of HTML the page is using.
    -for HTML5 <!DOCTYPE> html.
    -id attribute: uniquely identify that element from other elements on the page.
    -class attribute: a way to identify several elements.
    -<div> : used to group a set of elements together in one block-level box.
    -<span> : block-level and inline element like div, usually used with CSS.
    -<iframe> (inline frame): like a little window can be used with GPS location and Video.
    -<src>: specifies the URL.
    -height/ width: controls size.
    -meta: information about your web page.
    –

    HTML Chapter 17: “HTML5 Layout” (pp.428-451)

    -HTML5 introduces a new set of elements, allow dividing up the parts of a page:
    -<header> <footer>: for dividing up appearance.
    -<nav> : to contain the major navigational blocks.
    -<section> : groups related content together.
    -<figure> : mostly used to contain Images and Videos, also for other types.

    Semantic Elements -> <header>, <footer>, <nav>, <section>, <article>, <aside>.

    other elements are non-semantic.
    –

    HTML Chapter 18: “Process & Design” (pp.452-475)

    -In website designing you should consider:
    Target Audience,
    (why people visit your website?,
    what are tasks can they achieve,
    and information they need?, and when they are likely to return?)
    after studying all considerations, you can organize the information into sections or pages.
    so you can now create a diagram of pages (site map) and a wireframe sketch of the key information needed on page.

-Visual hierarchy(like size, color, style and so on) is important, like you can highlight what you need audience notice.

–

From the Duckett JS book:

Introduction

-JavaScript makes web pages more interactive by enable you :
1-accessing content (like selecting element),
2- modify content,
3- REACT TO EVENTS like selecting a button, and specify a rule the browser can follow.

JS Chapter 1: “The ABC of Programming” (pp.11-52)

-Script includes instruction a computer can follow to achieve a goal.
-Script extension -> .js
-In HTML <script> element is used to embed a JavaScript code.

  • to write a script, you need to:
    1. define your goal and list what task you want to achieve; because script is performed in order to solve a problem.
    2. Design your script tasks; like sketching every step in flow-Chart. (try to think like a computer)
    3. Code this script step by step.