[1] how the internet works
[1a]browsing the web
laptop -[> web address -[> ISP -[> DNS (phone book) -]> IP address -]> ISP -[> web address servers / location -]> HTML + CSS + JAVA -]> laptop -[> display website << [Feynman it] browsing the web
servers >> computers that can send and retrieve files
IP address >> identifier for anything connect to internet
[1b]the internet backbone
internet backbone >> physical cables that connect ISP's to servers
[1c] traceroute
traceroute / tracert >> shows path taken for a specific site from your network
how do you improve website performance (3 things)→location of server, how many trips & size of files
[2] history of the web
[2a] WWW vs internet
WWW vs Internet >> internet = phone, people | WWW = Instagram, language, internet is a vessel / platform for communication
WWW <> worldwide web | common lang. of communication for computer
[2b] HTML, CSS, javascript
HTML >> way to write text on website
hyperlinks >> links to other parts of sites
javascript >> makes sites interactive, collaborative with user and website interactions
CSS >> beautify the bland text format of HTML with visuals
what is a problem web developers face today?→HTML, CSS & javascript files -[> different browsers (chrome, microsoft edge, firefox, safari) -[> problems with results | also occurrent on mobile devices of all sizes and shapes
[3]HTML5
[3a] build your own first website
text editor >> program that allows written code
HTML format >> line 1 <!DOCTPYE html> line 2 <html> line 3 <head> line 4 <title></title> line 5 </head> line 6 <body> line 7 </body> line 9 </html>
[3b] index.html >> first file returned by server
DOCTYPE >> informs browser that HTML5 is being used
[3b] HTML tag
tags format >> begins with <> ends with </>
nested tag >> tag that hold your content (parent tag)
<h1> </h1> - <h6> </h6> <> headers height (1 - 6)
list item tag >> (children tag)(<li> </li>)
image tag >> (<img>) can add specific height & width
horizontal line break >> (<hr>) no end tag
strong tag >> bolded text (<strong> </strong>)
em tag >> emplhasize (italicizes) text (<em> </em>)
ordered list tag >> (nested tag) <ol> </ol>
anchor tag >> used to create hyperlink <a>
b tag >> no longer used
<p> </p> >> make paragraphs
i tag >> no longer used
input tag >> (ex. <input type="text"=> #
form tag >> creates forms <form> </form> #
line break >>(<br>) no end tag
attributes
unordered list tag >> (nested tag) <ul> </ul>
option tag >> allows to define option using value attribute
select tag >> for drop down (<select></select>
lorem + TAB >> fake filler paragraph
elements >> an entire line or statement (ex h1 element) entire block of functionality with content within (<h1>hello</h1>)(h1 element)
method >> identify method
name >> attribute | property in string query and value of user input #
required >> (attribute) | make specific content from user required
GET >> #
alt >> can be used to give a description of image when hovered over
value >> attribute, can be given specific values
minlength >> minimum character required
src >> sources of image
type >> attribute, value can be text, submit etc
POST >>
href >> hypertext refence (attribute) | source link
body tag
head tag
select tag
[3c] submitting a form #
query string >> user input added form form are attach the website link (URL). data is proceeded after ?
action attribute >>
URL encoding >>
comment tag >> (<!--comment--!>)
div tag >> divide content