[2021.07.26] 인턴 +147 HTML5 문법 및 기초 코드 작성 -1
인턴하면서, HTML에 대해 공부를 제대로 하지 않았다.
하지만, elasticsearch에서 geoip를 한 dashboard를 붙이기 위해, 이번에 제대로 웹 공부를 해보려고 한다.
해당 게시글은, 나처럼 웹에 대해 아무런 지식이 없는 사람에게 도움이 되는 게시글이다. (이미 웹에 안다면, 이 게시글을 PASS 해라)
해당 게시글은 HTML에 대해 정리가 잘 된 사이트를 이용해서, 응용 및 HTML5 문법에 대해 정리해 보려고 한다.
https://www.w3schools.com/html/html_forms.asp
HTML Forms
HTML Forms An HTML form is used to collect user input. The user input is most often sent to a server for processing. The Element The HTML element is used to create an HTML form for user input:
The element is a container for
www.w3schools.com
-> 해당 게시글의 내용은 위의 링크 기반을 토대로 정리하였음
-> 또한, 이미지 출처도 해당 링크에서 가져옴
-------------------------------------------------------------------------------------------------------------------------------
우선, HTML 작성한 코드의 결과 값을 보기 위해서, VS CODE를 설치 해보자.
https://code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
-> 해당 링크를 타고, 자신의 운영체제(OS) 버전에 맞게 설치해주자.
* 설치 과정에서 PATH 추가가 있기 전 까지 다 NEXT를 해준 후, PATH추가 문구가 뜨면 꼭 체크 후 설치하자.
그런다음에 컨트롤 + n을 눌러, 해당 HTML5 코드를 작성한 후. 파일명을 exampl.html로 저장 한다.
탐색기를 통해, 저장한 html파일의 경로에 들어가 더블 클릭하여, 자신의 의도에 맞게 HTML 이 잘 작성되었는지 보자.
나의 Example.html 코드이다
<!DOCTYPE html>
<html>
<body>
<h3>2021.07.26 HTML5에 대해 공부 해보자.</h3>
<form action="/action_page.php">
<label for="University_name">대학교 명:</label><br>
<input type="text" id="University_name" name="University_name" value=""><br>
<label for="major">학과명</label><br>
<input type="text" id="major" name="major" value=""><br>
<label for="Student_ID">학번</label><br>
<input type="text" id="Student_ID" name="Student_ID" value=""><br>
<!-- <>여기에 적는 한글 값이 HTML5에 보여지는 값</> -->
<label for="name">이름</label><br>
<input type="text" id="name" name="name" value=""><br><br>
<!-- value 값이 버튼 변경 값-->
<input type="submit" value="확인">
</form>
<p> 확인 버튼을 눌러서, 다음 페이지로 보내기 위해선 "/확인.php" 를 만들어서 연결해줘야함 </p>
</body>
</html>
<실행화면>
-----------------------------------------------------------------------------------------------------------------------------
<HTML5 구조>
-----------------------------------------------------------------------------------------------------------------------------
<HTML5 문법>
<!DOCTYPE html>
-> HTML5 문서를 정의
<html lang="en">
-> 웹 페이지의 언어를 선언
-> 이것은 검색 엔진과 브라우저를 지원하기 위한 것
-> 언어는 영어(en) 지정
<html></html>
-> HTML 페이지의 루트 요소
<head></head>
-> HTML 페이지에 대한 메타 정보를 포함
<body></body>
-> 페이지 문서 내 본문을 정의, 이미지, 하이퍼 링크 ,테이블 , 리스트 등 가시적인 컨텐츠에 대한 컨테이너
<title>injekim97 web study1</title>
-> 브라우저의 제목 표시 줄이나 페이지의 탭에 표시되는 HTML 페이지의 제목
<h1>page title_text</h1>
-> 페이지 내에서 나오는 제목 태그
* 큰 제목을 정의, h1 ~ h5 글씨가 낮을수록 글짜크기가 큼. 즉 h1 태그가 제일 큼
<p>This is a paragraph.</p>
-> 페이지 내 설명 태그 (문단)
----------------------------------------------------------------------------------------------------------------------
HTML Link(HiperLink)
-> <a>태그 로 정의하되, <a href="넣어줄 링크 값">해당 link를 설명해줄 text </a>
<a href="https://www.w3schools.com">This is a link</a>
HTML image
-> href속성은 <a>링크가 이동하는 페이지의 URL
-> src속성은 <img>표시할 이미지의 경로
-> width & height속성은 <img>이미지 에 대한 크기 설정
-> alt속성은 <img>이미지에 대한 대체 텍스트 제공
* 위의 alt,width,height 생략 가능
-> src="이미지파일명.jpg" , alt="image.text 설명?? 잘모름" width="100",height="100">
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
'Web' 카테고리의 다른 글
| [2021.07.26] 인턴 +147 HTML5 HTML Text Formatting -3 (0) | 2021.07.26 |
|---|---|
| [2021.07.26] 인턴 +147 HTML5 스타일 문법 (HTML5 Style Grammar) - 2 (0) | 2021.07.26 |
| [2021.04.05] 인턴 +35 Java Study 내용 정리 (0) | 2021.04.06 |
| [2021.03.25] 인턴 +24 node.js Passport(document) 정리 (0) | 2021.03.25 |
| [2021.03.22] 인턴 + 21 node.js 정리 중 (0) | 2021.03.22 |
댓글