공부/Frontend

웹개발_html 1주차 공부

유스베리이 2023. 3. 15. 19:45 
//tag 설명

<strong> 볼드체로 표시 하는 TAG </strong>
<u> 텍스트 밑에 밑줄 표시 TAG </u>
<h1> 제목 작성에 필요한 tag </h1>

# h1 -h6 tag

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

#줄 바꿈 tag

html new line tag

 

<br> 

 

<h1>html br tag </h1>
<h2>aldkjfaljkdfalkjdfadkfakjdhfkajhdfkahdkajh<br>adhfakjdhfkahdfkajshdlfa<br>akdjgfakjsd</h2>

html br tag

aldkjfaljkdfalkjdfadkfakjdhfkajhdfkahdkajh
adhfakjdhfkahdfkajshdlfa
akdjgfakjsd

<p></p> // 단락 나누기

<h1>html p tag</h1>
<p>aldkjfaljkdfalkjdfadkfakjdhfkajhdfkahdkajh</p><p>adhfakjdhfkahdfkajshdlfa</p><p>akdjgfakjsd</p>

html p tag

aldkjfaljkdfalkjdfadkfakjdhfkajhdfkahdkajh

adhfakjdhfkahdfkajshdlfa

akdjgfakjsd

<img> // 이미지 삽입 

<img src="img 파일의 주소.jpg" width = "100%">  //attribute 위치는 상관 없음

<parent><child> // 부모 자식 tag

     <li> </li> //list tag    

     <ul></ul> // list tag의 부모

     <ol></ol> //넘버링 할 수 있는 list tag의 부모

 

 

<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>dfadfa</li>
<li>adfadf</li>
<li>adfadf</li>
</ul>

 

  1. html
  2. css
  3. javascript
  • dfadfa
  • adfadf
  • adfadf

<table> //표 만드는 tag

<table>
	<tr>
    	<td> head </td>
        <td> 98.1% </td>
    </tr>
    <tr>
    	<td> body </td>
        <td> 97.1% </td>
    </tr>
    <tr>
    	<td> html </td>
        <td> 97.2% </td>
        
    </tr>
</table>
head 98.1%
body 97.1%
html 97.2%

# 문서의 구조와 슈퍼스타들

<title> // 웹페이지의 제목 

<title> WEB- html </title>

<meta> //한글 깨짐을 없애기 위해 이 페이지 차제를 열 때 사용해야할 구조 

<meta charset ="utf-8">

<!doctype html> // 이 문서는 html 이다!

<html> // 전체를 묶는 단위

<head> //본문 구조 

<body> // 본문 내용

<!doctype html>
<html>
<head> 
	<title> WEB </title>
    <meta charset="utf-8">
    
</head>
<body>
	<h1>html</h1>
    <p> dfadfkjadhfkjahsldfhalf</p>
    
 </body>
 </html>

 

<a> //검색 엔진 , hyper text, link 

    href : 링크 

    target= "_blank" : 새 페이지로 열기

    title =" html specification" : 이 페이지의 제목 

<p><a href="http://www.dfsdfsdf/dfds/" target ="_blank" title="html specification">Hypertext Markup Language</a></p>

# 웹사이트의 완성

<h1><a href ="index.html">WEB</a></h1>
	<ol>
    
    	<li><a herf="1.html">html</a></li>
        <li><a herf="2.html">css</a></li>
        <li><a herf="3.html">js</a></li>
        
    </ol>

WEB

  1. html
  2. css
  3. js

# 웹 호스팅 ( Git hub)

 

우리가 만든 코드를 다른 웹호스팅 기업을 통해 우리의 웹을 다른 사용자가 쓸 수 있도록 함.

 

# 동영상 삽입

<iframe>

<iframe width="560" src="http://동영상주소" frameborder="0" allowfullscreen></iframe>

# 댓글 기능 삽입(disqus 이용) // 웹서버를 통해야만 사용 가능

<div id="disqus_thread"></div>

<script> disqus에서 코드 복사</script>

#채팅 기능 삽입 (tawk 이용) //웹서버를 통해야만 사용 가능

 Tawk 코드 복사

<script type="text/javascript">
var Tawk_API= ~~~

#웹 사이트 방문자 분석기(analytics.google.com 이용)