HTML #2

Soymilk·2024년 1월 26일

최후의 문법 속성과 img

태그가 감싸고 있는 요소의 세부 특성을 정하기 위해 “속성”(attribute)가 사용된다!
img태그를 이용해서 속성에 대해 살펴보자
- img 태그의 src라는 속성을 사용하면 어떤 링크로부터 이미지 파일을 가져올지 설정할 수 있다!

<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong>
 and web applications.</p> 

<img src = "링크!!!">  </img>

<p style ="margin-top: 45px;">Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.
HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>

☝ 태그마다 속성값을 지정해줄 수 있다. 이를 통해 태그의 특성을 따로 정리할 수 있다!

부모 자식과 목록

부모와 자식

☝ 기본적으로 여러 가지 태그가 서로를 감싸고 있을 때, 감싸는 태그를 부모 태그, 감싸지는 태그를 자식 태그라고 한다.![](https://velog.velcdn.com/images/dlwjddn0225/post/27f84bc6-db06-45f1-88d3-4440eea6620e/image.png)

<p>
    <a href="https://opentutorials.org">opentutorials</a>
</p>

여기서는 p태그가 부모 태그, a태그가 자식 태그이다.
부모 자식 관계가 정해져있진 않지만, 몇 가지의 태그는 부모 자식 태그 관계가 정해져 있다.

<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JAVASCRIPT</li>
<ul>

위처럼 ul태그와 li태그는 서로 꼭 붙어 있어야 한다!

☝ HTML에서는 unordered list 의 약자로 ul, ordered list의 약자로 ol 두 가지의 태그를 이용해서 목록을 표시할 수 있다.

<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JAVASCRIPT</li>
</ul>

<ol>
	<li>HTML</li>
	<li>CSS</li>
	<li>JAVASCRIPT</li>
</ol>

ul태그를 이용한 부분은

HTML
CSS
JAVASCRIPT

이렇게 표시된다.

ol태그를 이용한 부분은

HTML
CSS
JAVASCRIPT

이렇게 표시된다.

문서의 구조와 슈퍼스타들

title태그 웹 페이지의 제목을 설정할 수 있는 가장 중요한 태그! 여러 개의 탭 중 title 태그를 설정하지 않은 탭은 html파일의 주소만 적나라하게 보여짐!
meta태그
- charset 속성 : <meta charset = “utf-8”> 을 통해서 웹사이트의 텍스트 인코딩도 변경 가능!

☝ 웹페이지를 설명하는 title, meta등의 태그는 <head>태그로 묶어서, 본문 자체는 <body>태그로 묶는다!

또한 head와 meta를 모두 묶어서 html태그로 감싸고, 코드 최상단에는 <!doctype html>을 추가한다.

<!doctype html>
<html>
<head>
	<meta charset = "utf-8">
	<title>HTML PRACTICE!!</title>
</head>

<body>
	<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong>
	 and web applications.</p> 

	<img src = "링크!!!">  </img>

	<p style ="margin-top: 45px;">Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.
	HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
</body>
</head>
</html>

이로써 모든 웹사이트의 기본이 되는 틀을 완성할 수 있게 되었다~!

HTML 태그의 제왕

은 <a>태그!

왜 a태그가 HTML태그의 제왕이라고 불릴까

anchor의 a를 따서 만든 태그.

이 태그는 링크를 사용할때 쓰여진다.

사용법

href 속성: href = “링크!!” 를 통해서 링크를 직접적으로 걸 수 있다. (Hypertext REFerence)

target 속성: target = “_blank” 를 통해서 새 창에서 링크를 열 수 있다.

title 속성: 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여주는 기능이다.

<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a>

위 코드는 사진처럼 링크를 표시함!

웹사이트 완성

여태까지 배웠던 ‘웹페이지’를 여러 개 모으고, 그들을 링크로 연결하면 “웹사이트”가 완성됨

예를 들어

index page

ㄴ 1. HTML page

ㄴ 2. CSS page

ㄴ 3. Javascript page

이런 구조의 웹사이트를 만들고 싶다면

index

<!doctype html>
<html>
<head>
  <title>WEB1 - Welcome</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>WEB</h2>
  <p>The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer program in 1990 while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN in 1991, first to other research institutions starting in January 1991 and to the general public on the Internet in August 1991.
  </p>
</body>
</html>

보이다시피 3개의 a태그로 각기 다른 웹페이지로 연결되는 링크를 걸어둠!

page 1

<!doctype html>
<html>
<head>
  <title>WEB1 - HTML</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>HTML</h2>
  <p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
  <img src="coding.jpg" width="100%">
  </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
  </p>
</body>
</html>

page 2

<!doctype html>
<html>
<head>
  <title>WEB1 - CSS</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>CSS</h2>
  <p>
    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
  </p>
</body>
</html>

page 3

<!doctype html>
<html>
<head>
  <title>WEB1 - JavaScript</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
  </p>
</body>
</html>