Skip to content

Commit e54e64d

Browse files
taejun12taejun12
authored
생활코딩 web1 - 첫번째 html - 웹사이트
0 parents  commit e54e64d

File tree

5 files changed

+184
-0
lines changed

5 files changed

+184
-0
lines changed

‎1.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>html</title>
6+
<meta charset="utf-8">
7+
</head>
8+
9+
10+
11+
<body>
12+
<h1><a href="web.html">web</a></h1>
13+
<ul>
14+
<li><a href="1.html">1. HTML</a></li>
15+
<LI><a href="2.css.html">2. CSS</a></LI>
16+
<LI><a href="3.JavaScript.html">3. JavaScript</a></LI>
17+
</ul>
18+
<p>
19+
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
20+
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance.
21+
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. HTML 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. Tags such as 'img' and 'input' directly introduce content into the page. Other tags such as 'p' and '/p' surround and provide information about document text and may include sub-element tags. Browsers do not display the HTML tags but use them to interpret the content of the page.
22+
HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. The inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.[2] A form of HTML, known as HTML5, is used to display video and audio, primarily using the 'canvas' element, together with JavaScript.
23+
</p>
24+
25+
</body>
26+
</html>

‎2.css.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>css</title>
6+
<meta charset="utf-8">
7+
</head>
8+
9+
10+
11+
<body>
12+
<h1><a href="web.html">web</a></h1>
13+
<ul>
14+
<li><a href="1.html">1. HTML</a></li>
15+
<LI><a href="2.css.html">2. CSS</a></LI>
16+
<LI><a href="3.JavaScript.html">3. JavaScript</a></LI>
17+
</ul>
18+
19+
<p>
20+
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.[2]
21+
22+
CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts.[3] This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.
23+
24+
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.[4]
25+
26+
The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.
27+
28+
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.[5]
29+
30+
In addition to HTML, other markup languages support the use of CSS including XHTML, plain XML, SVG, and XUL. CSS is also used in GTK widget toolkit.
31+
</p>
32+
33+
</body>
34+
</html>

‎3.JavaScript.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>JavaScript</title>
6+
<meta charset="utf-8">
7+
</head>
8+
9+
10+
11+
<body>
12+
<h1><a href="web.html">web</a></h1>
13+
<ul>
14+
<li><a href="1.html">1. HTML</a></li>
15+
<LI><a href="2.css.html">2. CSS</a></LI>
16+
<LI><a href="3.JavaScript.html">3. JavaScript</a></LI>
17+
</ul>
18+
19+
<p>
20+
JavaScript (/ˈdʒɑːvəskrɪpt/), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.
21+
22+
JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[10] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).
23+
24+
The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O.
25+
26+
JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js.
27+
28+
Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.
29+
</p>
30+
31+
</body>
32+
</html>

‎web.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>web</title>
6+
<meta charset="utf-8">
7+
</head>
8+
9+
10+
11+
<body>
12+
<h1><a href="web.html">web</a></h1>
13+
<ul>
14+
<li><a href="1.html">1. HTML</a></li>
15+
<LI><a href="2.css.html">2. CSS</a></LI>
16+
<LI><a href="3.JavaScript.html">3. JavaScript</a></LI>
17+
</ul>
18+
19+
<p>
20+
The World Wide Web (WWW), commonly known as the Web, is an information system enabling information to be shared over the Internet through simplified ways meant to appeal to users beyond IT "specialists" and hobbyists,[1] as well as documents and other web resources to be accessed over the Internet according to specific rules, the Hypertext Transfer Protocol (HTTP).[2]
21+
22+
Documents and downloadable media are made available to the network through web servers and can be accessed by programs such as web browsers. Servers and resources on the World Wide Web are identified and located through character strings called uniform resource locators (URLs). The original and still very common document type is a web page formatted in Hypertext Markup Language (HTML). This markup language supports plain text, images, embedded video and audio contents, and scripts (short programs) that implement complex user interaction. The HTML language also supports hyperlinks (embedded URLs) which provide immediate access to other web resources. Web navigation, or web surfing, is the common practice of following such hyperlinks across multiple websites. Web applications are web pages that function as application software. The information in the Web is transferred across the Internet using the Hypertext Transfer Protocol (HTTP).
23+
24+
Multiple web resources with a common theme and usually a common domain name make up a website. A single web server may provide multiple websites, while some websites, especially the most popular ones, may be provided by multiple servers. Website content is provided by a myriad of companies, organizations, government agencies, and individual users; and comprises an enormous amount of educational, entertainment, commercial, and government information.
25+
26+
The World Wide Web has become the world's dominant information systems platform.[3][4][5][6] It is the primary tool billions of people worldwide use to interact with the Internet.[7]
27+
28+
The Web was invented by Tim Berners-Lee at CERN in 1989 and opened to the public in 1991. It was conceived as a "universal linked information system".[8]
29+
</p>
30+
31+
</body>
32+
</html>

‎생활코딩.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>생활코딩 - WEB1</title>
6+
<meta charset="utf-8">
7+
</head>
8+
9+
10+
11+
<body>
12+
<h1>hello world - <u>06/25</u>/23 - <a href="web.html" target="_blank" title="world wide web specification">web</a>1-12</h1>
13+
우클릭 -> 페이지 소스 클릭 -> web page의 html 코드 확인 가능
14+
<p>
15+
<br><strong>H1</strong> - heading 즉, 제목을 나타내는 tag
16+
<br>웹 생성에 사용되는 tag의 수를 분석한 결과 대부분의 웹에서 20-25개의 tag가 사용됨
17+
<br>br - 줄바꿈을 나타내는 tag -> h1처럼 쌍으로 사용할 필요가 없음
18+
</p>
19+
20+
<p>
21+
p는 문단을 나누는 paragraph tag
22+
</p>
23+
<p>
24+
<strong>img - 이미지를 넣는 tag</strong> -> img src(source의 줄임말)="이미지 주소" width="이미지 크기"의 형태로 사용 -> src, width와 같은 부분을 속성(attribute)라고 하며 순서는 상관이 없음
25+
<br> unsplash.com - 저작권 필요 없이 이미지를 사용할 수 있는 사이트
26+
</p>
27+
<p>
28+
tag에는 부모tag와 자식tag가 존재 - 두 관계가 바뀌기도 하지만, 항상 같이 쓰이는 tag들도 존재 -> li와 ul<br>
29+
ul이 부모tag / li가 자식tag
30+
<br>목차를 만들 때 사용하는 tag - li<br>
31+
ul은 여러 li를 문단 나누듯이 나눌 수 있음
32+
<br>ul은 각 li의 숫자를 내가 직접 적어야함 / ol은 자동으로 li에 숫자 부여 -> ul = unordered list / ol = ordered list
33+
<ul>
34+
<li><a href="1.html" target="_blank" title="html specification">1. HTML</a></li>
35+
<LI><a href="2.css.html" target="_blank" title="css specification">2. CSS</a></LI>
36+
<LI><a href="3.JavaScript.html" target="_blank" title="JavaScript specification">3. JavaScript</a></LI>
37+
</ul>
38+
<ol>
39+
<li>생활코딩</li>
40+
<li>코딩도장</li>
41+
</ol>
42+
</p>
43+
44+
<h1><u>06/26</u>/23 - web13-
45+
</h1>
46+
47+
<p>
48+
title - 파일의 제목을 나타냄
49+
<br><strong>meta charset</strong> - 우리가 작성한 파일은 오른쪽 하단을 보면 UTF-8로 저장됨을 알 수 있음 -> 한글을 썼을 때 글씨가 깨지면 meta charset="UTF-8"을 입력 -> 글씨가 안 깨짐
50+
<br><strong>head는 파일의 제목을 나타내는 tag</strong> -> title, meta charset과 같은 tag들은 head라는 tag로 묶어야함<br>
51+
본문은 body라는 tag로 묶음
52+
<br>body/head tag를 감싸는 태그가 존재 - <a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html5 specification"> <strong>html</strong> </a> -> 이 문서가 html이라는 것을 나타내기 위해 html tag 위에는 !doctype html을 추가<br>
53+
<strong>a - 링크를 거는 tag</strong> -> html specification이라고 치면 W3C라는 사이트가 나옴 -> 이 사이트의 주소를 복사한 다음, 내 html 파일에서 링크를 걸고 싶은 문장에 a href="주소"와 같은 식으로 작성하면 해당 사이트로 가는 링크 생성 <br>
54+
a href에서 a는 anchor, h는 hypertext, ref는 reference 의미<br>
55+
링크가 새 탭으로 열리게 하고 싶으면 target="_blank" 입력<br>
56+
클릭하기 전에 링크가 무엇인지 알려주고 싶으면 title="툴팁으로 알려주고 싶은 내용"입력하면 툴팁 생성
57+
</p>
58+
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)