Skip to content

Commit

Permalink
complete: web2-css
Browse files Browse the repository at this point in the history
  • Loading branch information
@0eun2
0eun2 committed Jul 26, 2023
1 parent 6c2d27c commit 08b6c40
Show file tree
Hide file tree
Showing 9 changed files with 239 additions and 187 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
72 changes: 28 additions & 44 deletions 1.html
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,41 @@
<!doctype html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-D42BL0RB6F"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-D42BL0RB6F');
</script>
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jSJM9iOiQ1g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</p>
<p>
<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">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.
<div id="grid">
<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>
<div id="article">
<h2>HTML</h2>
<p>
<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">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.
</p>
</div>
</div>
<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>
<!-- Comment -->
<p>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://web1-mveonnwfa4.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jSJM9iOiQ1g" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</p>
</body>

</html>
104 changes: 23 additions & 81 deletions 2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,93 +2,35 @@
<html>

<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-D42BL0RB6F"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', 'G-D42BL0RB6F');
</script>
<title>WEB1 - CSS</title>
<meta charset="utf-8">

<style>
body {
margin: 0;
}

#active {
color: red;
}

.saw {
color: gray;
}

a {
color: black;
text-decoration: none;
}

h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0;
padding: 20px;
}

ol {
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 20px;
}
</style>
<link rel="stylesheet" href="style.css">
</head>

<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">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>
<!-- Comment -->
<p>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function () { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://web1-mveonnwfa4.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
Disqus.</a></noscript>
</p>
<div id="grid">
<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>
<div id="article">
<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>
</div>
</div>
</body>

</html>
72 changes: 25 additions & 47 deletions 3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,59 +2,37 @@
<html>

<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-D42BL0RB6F"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', 'G-D42BL0RB6F');
</script>
<title>WEB1 - JavaScript</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</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>
<!-- Comment -->
<p>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function () { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://web1-mveonnwfa4.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
Disqus.</a></noscript>
</p>
<div id="grid">
<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>
<div id="article">
<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>
</div>
</div>
</body>

</html>
23 changes: 23 additions & 0 deletions box.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<style>
h1 {
border: 5px solid red;
padding: 20px;
margin: 20px;
display: block;
width: 100px;
}
</style>
</head>

<body>
<h1>CSS</h1>
<h1>CSS</h1>
</body>

</html>
32 changes: 32 additions & 0 deletions grid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<style>
#grid {
border: 5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}

div {
border: 5px solid gray;
}
</style>
</head>

<body>
<div id="grid">
<div>NAVIGATION</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</div>
</div>

</body>

</html>
Loading

0 comments on commit 08b6c40

Please sign in to comment.