Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

London9 Turing -Farnoosh Moayeri-HTML/CSS-WEEK_2 #275

Open
Farnooshmo wants to merge 2 commits into
base: master
Choose a base branch
from
Open

London9 Turing -Farnoosh Moayeri-HTML/CSS-WEEK_2 #275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
89af268
update html/css
Farnooshmo Oct 29, 2022
042bc1c
update css
Farnooshmo Oct 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,25 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
body {
color: rgb(4, 4, 30);
text-align: center;
margin-top: 40px;
background-color: rgb(223, 234, 185);
}

.example {
color: aliceblue;
background-color: black;
margin: 40px;
padding: 4px 6px;
}
.anatomy_list {
text-align: left;
}

p:first-child {
color: rgb(239, 226, 226);
background-color: rgb(26, 159, 73);
padding: 5px;
}
49 changes: 49 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,56 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header class="header">

<h1>What is HTML?</h1>
</header>
<article class="main">
<section class="html_basics">
<p>
HTML (HyperText Markup Language) is the code that is used to structure
a web page and its content. For example, content could be structured
within a set of paragraphs, a list of bulleted points, or using images
and data tables. As the title suggests, this article will give you a
basic understanding of HTML and its functions.
</p>
</section>
<section class="html_definition">
<p>
HTML is a markup language that defines the structure of your content. HTML consists of a series of <a href="https://developer.mozilla.org/en-US/docs/Glossary/Element" target="_blank">elements</a>, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing <a href="https://developer.mozilla.org/en-US/docs/Glossary/Tag" target="_blank">tags</a> can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:

My cat is very grumpy
If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:

<p class="example">< p >My cat is very grumpy< /p ></p>

</p>
</section>


<hr>



<section class="html_anatomy">

<img src="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-small.png" alt="HTML anatomy" width="200" height="70">

<ol class="anatomy_list">
<li>The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.</li>
<li>The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.</li>
<li>The content: This is the content of the element, which in this case, is just text.</li>
<li>The element: The opening tag, the closing tag, and the content together comprise the element.</li>
</ol>

</section>
</article>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->

<img alt="random image from lipsum.com" src="https://www.lipsum.com/images/banners/black_970x90.gif" width="200" height="50">
<hr>
<footer>You can find more information <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics" target="_blank">here</a>!</footer>

</body>
</html>