Day 041

AWESOMee·2022년 3월 15일

Udemy Python Bootcamp

목록 보기

41/64

Udemy Python Bootcamp 041

How Dose the Internet Work?

The internet is a long piece of wire and the wire connects different computers to each other. The computers that any user would you use to access the internet is called a client.
Behind the scenes, your browser will send a message to your internet service provider. So there are the people who you pay to be able to access the internet. Now the meddage that you're sending the ISP is I want to see website and the ISP will then reply that message to something called a DNS server, a domain name system server. And DNS server is essentially just a souped up phonebook. When you make that request through your browser is the DNS server will look up in its database as to what is the exact IP address of that website that you are trying to access. And every single computer that's connected to the internet has an IP address. This is like a postal for your computer so that when people need to send and receive files in the internet each computer can be located by their unique IP address. And once the DNS server finds the IP address, it sends that back to your browser.
The next thing that happens is you will send a direct request to that address through your internet service provider. And this message will be delivered via what's called the internet backbone. The internet backbone isn't some sort of analogy for some clever Programming. It's literally the backbone of the internet.
So once I've gotten the IP address of the website that I want to access, then my browser sends another message through the internet service provider via the internet backbone to the server that is located at that address. And on the server there's all of the files that I would need in order to be able to view the website homepage. The server then sends all of theose files back to me through the internet backbone and I get to see the website homepage in my browser.

How Do Website Actually Work?

The HTML code file is responsible for the structure of your website. And you write HTML code, you also build up the structure of your website. So you could use HTML to add an image or button or text box, whatever it is that you need in your website.

The CSS files are responsible for styling your website. When you incorporate CSS, it allows you to specify how you want your website to look.

The JavaScript code allows your website to actually do things or have behavior.

Introduction to HTML

HTML(HyperText Markup Language) is the foundation of all websites.

The heading elements only go from h1 to h6.
We started out by marking the text with an <h1> and then we closed it off with a closing tag</h1>.

But the line break element <br> works all by itself.

The Anatomy of an HTML Tag

<hr size="3">
hr : HTML element
size=3 : HTML Attribute

<center>
<h1>The Adventures of Sherlock Holmes</h1>
<br>
<h2>by Arthur Conan Doyle</h2>
<hr>
</center>

#output

The HTML Boilerplate

Standard HTML bolierplate code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
  </body>
</html>

<meta charset="utf-8"> : The meta elements give extra metadata or associated data to your HTML document. And out webpage is encoded using UTF-8 encoding system.

https://unicode-table.com/en/
: List of Unicode characters

Structure Text in HTML

The emphasis tag <em> tells the browser the words that are enclosed between it should be stressed or should be emphasized, but the i tag <i> only italicizes text.

My personal website

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>****'s Personal Site</title>
  </head>
  <body>
    <img src="****.png" alt="****">
    <h1>**** ***</h1>
    <p><em>Web Developer in <strong><a href="https://en.wikipedia.org/wiki/South_Korea">South Korea</a></strong>.</em></p>
    <p>I am studying Computer Science and want to be a developer.</p>
    <hr>
    <h3>Education</h3>
    <ul>
      <li>Udemy Python Bootcamp</li>
      <li>Udemy Web Developer Bootcamp</li>
    </ul>
    <h3>My Hobbies</h3>
    <ol>
      <li>Ballet</li>
      <li>Read a Book</li>
    </ol>
    <a href="blogs.html">My Blogs</a>
    <a href="contacts.html">Contact Me</a>
  </body>
</html>

blogs.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Blogs</title>
  </head>
  <body>
    <h3>Blog</h3>
    <ul>
      <li><a href="https://velog.io/@awesomee">Velog</a></li>
      <li><a href="https://blog.naver.com/qsxwdcefv753">Naver Blog</a></li>
      <li><a href="https://twitter.com/jjolev_escape">Twitter</a></li>
    </ul>
  </body>
</html>

contacts.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Contact Me</title>
  </head>
  <body>
    <h1>My Contact Details</h1>
    <p>010********</p>
    <p>********@gmail.com</p>
  </body>
</html>