lecture22 build your first website
------ use sublime text
sublime text and save it as index.html, when we open it up in Chrome it's going to know it's a web page so it's going to show it as an HTML web page
---------web design vs web develop
web design is more graphic design
web develop all you need is notepad(we choose sublime text, one of the best notepad kind of editors out there)
lecture23 fundamental concepts
----<!doctype html>
we're gonna add this at the top every HTML page and just declares that the document type is HTML and putting like this actually means html5 . It just tells your browser : hi, we are working with html5 page
lecture24 HTML tags
------HTML && CSS && JS
HTML is what puts the content together for your page but it's going to be ugly coz it's just content
CSS is what puts together your style , it stands for cascading style sheets , so it gives style to your webpage
JS is function, it makes the web page do cool things , load in data real time just like Pinterest does, like instagram, it makes things move around and animate
JS is where things get fun it's also where you get paid better
-----HTML tags
There are 10 - 15 html tags(easy)
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1>big</h1>
<h2>not so big</h2>
<h3>not really big</h3>
<p>
this is <strong>bold</strong>
this is <em> italic </em>
</p>
<p>
this is <strong>bold</strong>
this is <em> italic </em>
</p>
<p>
this is <strong>bold</strong>
this is <em> italic </em>
</p>
<p>
<a href="http://www.google.com"> google.com </a>
<ol>
<li>banana </li>
<li>apple </li>
<ul>
<li>fuji </li><br>
<img src="https://4.imimg.com/data4/TN/LV/MY-28186204/azeem-6-250x250.jpg" width="40" height="40">
<li> honeycrip</li>
<img src="https://images-na.ssl-images-amazon.com/images/I/81pkXnDX9pL._SY355_.jpg" width="40" height="40">
</ul>
</ol>
</body>
</html>
open the sublime text with default Chrome, it shows like this,
--------------link to another page ------
<a href="http://www.google.com"> google.com </a>
--------------why named index.html? ------
if there are a lot of html files named like, index.html, page3.html, newpage.html, by default, most servers just say ,I'll return index.html firstly
------------ file:/// VS http://
file:///
I can't really access it outside of my computer
is using the file protocol
we call it a relative path
-----how to copy a website
View --> Developer --> View Source
-----how to submit a form
register.html
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
</head>
<body>
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"> <br>
Email: <input type="email" required name="email"><br>
Password:<input type="password" min="5" name="password"><br>
Birthday:<input type="date" > <br>
Gender:<br>
<input type="radio" name="gender">Male <br>
<input type="radio" name="gender" >Female <br>
<input type="radio" name="gender">Other <br>
Pets:<br>
<input type="checkbox" > Cat<br>
<input type="checkbox" > Dog<br>
<input type="checkbox" > Cow<br>
Cars:<br>
<select>
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select><br>
<input type="submit" value = "Register Now!">
<input type="reset" >
</form>
</body>
</html>
----- how to send register information to backend ?
when we submit, the link above would be like this,
file:///Users/jieliu/Desktop/register.html?firstname=jie&lastname=liu&email=liuliu5151%40gmail.com&password=&gender=on
this is called query strings, one way for us to send register's info to the backend or servers
coz we have to store this form info somewhere
so that when when we come back onto this page , the web site remember us
this was automatically generated in html5, with a form. but form was using an attribute called GET
<form method = "GET">
if I left it as this , will do the exact same thing
where it will attach the form information to the URL
and send it to the server
if so, we should offer name=" "and value= ""
<input type="radio" name="gender" value="Male">Male <br>
so for the query string to work,
it has to have a name associated with the value
so it that's one is selected , a 'value' will be sent
once register a form makes sense to you , you can call yourself an HTML developer
----- a relative link
There are 3 pages and relative to each other
<a href="page2.html">page2</a>