[MDN] Getting started with web

둡둡·2022년 12월 12일
MDNweb
0

Installing basic software

Install

  • A text editor (like Visual Studio Code)
  • Web browsers (like Fitrefox, Chrome, Opera)
  • A local web server

Tools

  • A computer
  • A text editor
  • Web browers
    • cf. 기능에 따라 브라우저 지원 버전 중요
  • A graphics editor
  • A version control system (like Git)
  • An FTP program (File Transfer Protocol)
  • An automation system (like Webpack)
    • cf) Webpack : a module bundler to bundle JavaScript files for usage in a brower
      • Module : 개별적인 기능을 하는 작은 단위 (각각의 JavaScript 파일, HTML, CSS, Images, Font, etc.)
      • Bundler : 애플리케이션을 구성하는 모듈을 병합하고 압축해서 만들어진 하나 이상의 파일
  • Libraries, Frameworks, etc.

What will your website look like?

Planning

  • What is your website about?
  • What information are you presenting on the subject?
  • What does your website look like?
    (the background color, font, etc.)

Sketching the design

  • How I want the site to look
  • cf. Web teams often include a graphic designer and a user experience designer

Choosing the assets

  • Text : paragraphs, title, etc.
  • Theme color (the Color Picker)
  • Images
  • Font
  • cf) px / em / rem

Dealing with files

  • What structure the website have
    • index.html : a homepage content
    • images folder : all the images on a site
    • styles folder : the CSS code
    • script folder : all the JavaScript code

HTML basics

HTML(HyperText Markup Language)

  • the structure of the content
  • consist of a series of elements to wrap
  • make it appear or act a certain way
Anatomy of an HTML element
<p class="greeting">Hello, <strong>my</strong> HTML</p>
  • The opening tag : <p>
  • The closing tag : </p> includes a forward slash
  • The content
  • The element : the entire elements
  • Attribute : class(or value, etc.), extra information
Nesting elements
  • <strong>
  • can put elements inside other elements
Void elements
  • have no content, like <img>
Anatomy of an HTML document
  • <!DOCTYPE html> : doctype
  • <html></html> : wraps all the content on the entire page
  • <\meta name="viewport" content="width=device-width"> : Render the page at the width of viewport (like PC, mobile, etc.)
  • <title></title> : Set the title of the page
  • <body></body> : contains all the content

Images

  • alt(alternative) : specify descriptive text about the image

Marking up text

  • Headings: 6 heading levels
    • <h1> ~ <h6>
  • Paragraphs: <p></p>
  • Lists
    • Unordered lists : <ul>
    • Ordered lists : <ol>
    • each item of the lists : <li>
  • <a> (anchor)
  • href : hypertext reference

CSS basics

What is CSS?

  • Cascading Style Sheets Language
Anatomy of a CSS ruleset
p { 
  color : red;
}
  • A ruleset : the whole structure
  • Selector : the HTML element name
    • ID - #id
    • Class - .class
    • Attribute - img[src]
    • Pseudo-class - a:hover
  • Declaration : the element's properties to style
  • Properties : a property of the elements
  • Property value
Selecting multiple elements
p,
li,
h1 {
  color: red;
}
  • can select multiple elements and apply a single ruleset

Font and text

  • can links the page to a style sheet

Boxes

  • padding : the space around the content
  • border : the solid line
  • margin : the space around the outside of the border
  • width, background-color, color, display, etc.
  • Q. The differences between Block-level and Inline Elements
    • Block-level Elements
      • always starts on a new line
      • add some a margin space before and after
      • takes up the full width, stretches out to the left and right as far as it can
      • <p>, <div>, <li>
    • Inline Elements
      • does not start on a new line
      • only takes up as much width as necessary
      • <span>, <a>, <img>

JavaScript basics

What is JavaScript?

  • a programming language that can add interactivity to a website
  • Providing functionality such as dynamically creating HTML and setting CSS styles
  • Thrid-party APIs and frameworks, libraries that can apply to HTML to accelerate the work of building sites and applications

An example

  • \<script src="scripts/main.js"></script>
    • cf. async and defer
      • \<script async=""> : Execute as soon as the download is complete, but does not guarantee any specific execution order
      • \<script defer=""> : Load in the order they are in and will only execute once everything has finished loading
    • cf. <script type="text/javascript"> is not required

Language basics

Variables
  • String
  • Number
  • Boolean
  • Array
  • Object
Comments
// This is comment
  • the comments along with code that the browser ignores it
Operators
  • +, -, *, /, =, ===, !, !==
Conditionals
  • it () { ... } else { ... }
Functions
  • be built into the browser, such as querySelector and alert
  • can define own functions
// script
function test(num1, num2) {
  let result = num1 + num2;
  return result;
}

test(1,2); // result = 3
test(20, 20); // result = 40
Events
addEventListener("click", () => {
  alert("Hi~");
});
  • an event handler : listen for activity in the browser and run code in response (such as click event)

Publishing a website

  • Getting web hosting and a domain name
  • Using an online tool
    • GitHub, Google App Engine
  • Using a web-based IDE
    • CodePen JSFiddle, JS Bin, etc
    • cf. IDE (Integrated Development Environment) : a software application that provides comprehensive facilities to computer programmers for software development, such as a source code editor, build automation tools and a debugger

How the web works

Clients and servers

  • Clients are like the internet-connected devices
  • Servers are computers that store webpages, sites, or apps

The toolbox

  • Internet connection
  • TCP/IP (Transmission Control Protocol and Internet Protocol)
    • how data should travel across the internet
      (like a car or a bike)
  • DNS (Domain Name System)
    • like an address book for websites
  • HTTP (Hypertext Transfer Protocol)
    • a language for clients and servers to speak to each other
  • Component files
    • Code files : HTML, CSS, and JavaScript
    • Assets : all the other stuff that makes up a website, such as images and music, video, etc.

When typing a web address

  • Access the DNS server, and finds the real address of the server
  • Send an HTTP request message to the server using TCP/IP
  • If the server approves it, and then sending the websites files called data packets to the browser
  • The browser displays it

Order in which component files are parsed

  • Parses the HTML file, recognizing to CSS stylesheets and to script
  • Sends requests it back to the server for CSS files and JavaScript
  • Generates an in-memory DOM tree and CSSOM, and compiles the JavaScript
  • Builds the DOM tree and applies the styles, executes the JavaScript
  • Display the page of the content and can begin to interact with it
  • Q. What is differences between HTML and CSS, Javascript?
    • HTML : Content and Layout
      • a language for the building blocks of websites, how documents and web pages are displayed in a web browser
      • like a builing in a shop
    • CSS : Styling and "Look&Feel"
      • a style sheet language (colors, font, layout, etc.)
      • like a interior design of the shop
    • JavaScript : Interactive Elements
      • allows to change CSS and HTML elements on a website after that has been loaded
      • like Communicating a staff with a guest

DNS

  • Domain Name Servers
  • A web address is match up to the webstie's IP address
    (ex. 63.245.215.20 -> "mozilla.org")

Packets

  • The format in which the data is sent from server to client, in thousands of small chunks

"Getting started with the web", by MDN contributors, last modified Sep 13. 2022, https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web

profile
둡둡
괴발개발라이프
이전 포스트

The Linux Command

다음 포스트

[스프링 MVC 2] 메시지, 국제화

0개의 댓글