기능이 많다 여기다가 css 까지 더해지면 할수있는건 아주많다 그래서 css는 다음장에 쓸거임
hyperlink?
위키같은곳 보면 링크 삽입된 글자 누르면 링크로 이동하는 그런거임
Inline links: pointing to another file in the same server, or files on another web server
(같은 서버 또는 다른 서버에있는 파일 불러오는거) 예를들면 나무위키에서 디씨 링크다는거임
Anchors: pointing to another part/section in the same file (같은 파일에 있는거 불러오기) 예를들면 나무위키에서 같은 나무위키 문서에있는거 링크해서 클릭하면 같은페이지 (스크롤 다운하면 있는거)로 가는거
<a> element
- href: what to point to
- target: where to open
ex) <a href="파일이름.html" target="_blank">표시되는 글자</a>
같은 파일 내에서 링크할때
1. 헤드에 아이디를 정해준다 <h2 id="intro">Introduction</h2>
2. #intro로 불러온다 <a href="csci2720.html#intro">Introduction</a>
IMAGE/ VIDEO/ AUDIO
1. 일단 이미지를 추가한다 (VS code 쓰면 그냥 이미지 드레그드랍하면 될듯)
2. <img>로 파일 불러오면 됨
3. <img src="cuhk.jpg" width="100" height="150"> 이런식. 이때 width 랑 height 직접 설정할수도 있음
4. <circle>, <line> 같은 graphic elements들도 있음
5. <audio>랑 <video>도 이미지랑 마찬가지로 쓰면됨
<video control width="500">
<source src="2720ver1.mp4" type="mp4">
<source src="2720ver2.webm" type="webm">
<p>Your browser isn't supported!</p>
</video>
이런식
이런식으로 html 코드를 적어서 실행시키면
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
</head>
<body>
<h2 id="intro">Introduction</h2>
<a href="prac.html" target="_blank">표시되는 글자</a>
<section>
<h1>Section1</h1>
<p>Section은 이런식으로</p>
</section>
<section>
<h1>Section2</h1>
<p>나눌수있다</p>
</section>
<a href="prac.html#intro">Introduction</a>
</body>
</html>
이렇게 실행된답니당
Introduction
표시되는 글자Section1
Section은 이런식으로
Section2
나눌수있다
솔직히 html은 기능이 너무 많고 이걸 다 외워서 쓰는거보다 필요할때마다 찾아서 쓰는게 제일 좋음.
물론 지금까지 올린건 다 기본적인거고 진짜 기초적인 틀만 잡는거라 외우는게 좋지
https://www.w3schools.com/html/default.asp <여기가면 기능 다있음
'언어는 과-학인가요? > 전반적인 web development (html css JS )' 카테고리의 다른 글
| CSS로 form 만들기 (0) | 2022.01.19 |
|---|---|
| 유용한 CSS들 (0) | 2022.01.14 |
| CSS 쓰는법 (0) | 2022.01.13 |
| HTML은 아주 쉽지만 (1) (0) | 2022.01.13 |
| CSCI2720 Past paper 분석 (0) | 2022.01.13 |