Day 41 - Web Foundation(Introduction to HTML)

Day 41

 

 

HTML - building structure, foundation

CSS - styling, like painting and decorating a house

JS - do things or having a behavior, like electricity

 

 

Google Website를 예시로 들면

 

HTML - 로고, 검색창1, 버튼2  (기본 골조)

CSS - 레이아웃, 검색창 그림자등 디자인, 버튼 디자인 (레이아웃 및 디자인)

JS - 검색창 작동 (기능)

 

 

---

HTML

HyperText Markup Language

 

https://codepen.io

CodePen

Start Coding

 

 

https://www.gutenberg.org/ebooks/1661

 

 

 

Turn this (plain text)

Sherlock Holmes in plain text UTF-8

into something like this (HTML 5)

 

 

 

 

 

---

 

 

First, copy the title and author of Sherlock Holmes

And tag the title with h1 tag

 

 

Heading tag size

h1 > h2 >h3 > h4 > h5 > h6

 

 

---

 

HTML

 

If you use Atom or any other IDEs, it usually provides a feature that you can call the entire code (boilerplate) that are frequently used. Boilerplate means standardized text, copy, documents, methods, or procedures that may be used over again without making major changes to the original.

>> 보통 IDEs에서 짧은 shortcut으로 boilerplate(상용구)를 쉽게 불러올 수 있다.

 

e.g.

In atom, if you type 'html' and press enter, it will write the basic html tag/code for you.

상용구 불러온 후 타이틀을 입력한 모습

In next line, I want to use my text in italic.

To do that, there are two tags you can use, emphasis tag <em></em> and i tag <i></i>,

BUT

Try to use <em></em> because emphasis its contents while <i></i> just slant the text between.

 

So, in html we're focusing on building the structure of a page, so it's better to use <em></em> because it means that the text in italic matters.

 

	기능적 요소 (html)	스타일 효과 (css)
bold	<strong></strong>	<b></b>
italic	<em></em>	<i></i>

 

---

List

 

Ordered List <ol></ol>

    <ol>
      <li>Reading</li>
      <li>Baking</li>
      <li>Digital Painting</li>
    </ol>

1. Reading
2. Baking
3. Digital painting

 

 

Unordered List <ul></ul>

    <ul>
      <li>Michigan State University</li>
      <li>Sparta Coding Club</li>
      <li>Udemy Python Bootcamp</li>
    </ul>

• Michigan State University
• Sparta Coding Club
• Udemy Python Bootcamp

 

 

---

Image

 

    <img src="" alt="">

이미지를 넣고 싶다면 위의 코드를 활용한다.

 

src(source) 안에는 이미지의 출처를 적는다.

인터넷에서 가져온 사진이면 링크를, 

컴퓨터에 저장된 사진이라면 path를 적으면 된다.

 

 

link를 통한 방법이 편하긴 하지만 너무 dependent 하기 때문에 불러오기에 실패할 수 있다.

그렇기 때문에 index.html 파일과 같은 폴더에 이미지를 저장해서 불러오는 방법이 더 안전하다. 

 

위의 경우는 index.html과 home_office.jpg가 같은 디렉토리 안에 있기 때문에 파일명만으로 불러오기 할 수 있지만

만약 사진 파일이 다른 폴더 안에 있다면 path를 적어주어야 한다. (full / local)

 

 

 

---

 

Link

You can use an 'a tag' to make a link to other websites.

<a href="https://www.udemy.com/course/100-days-of-code/">python</a>

 

a - html element

href - html attribute

"https://..." - link destination

'Python' - link text

 

 

 

---

 

Other pages

 

If you create new html file in the same folder (or other folders, in this case you have to type the path to the file), you can make a link to that html page.

 

Other than 'index.html,' I have created two seperate pages, 'hobbies.html' and 'contact.html.'

(after screenshot, I have created a link back to the main page in contact.html just like in hobbies.html.)

 

 

 

 

 

 

 

 

Alright.

This is it for today :D