Codecademy front-end engineer course
DAY3
- Learn HTML: Structure
- Semantic HTML
- HTML basic structure [HTML 구조]
<!DOCTYPE html>
<html>
<head>
<title>My Coding Journal</title>
</head>
</html>| <!DOCTYPE html> | the declaration specifying the version of HTML for the browser |
| <html> | tags that enclose all of your HTML code |
| <head> | - tag that contains the metadata of a webpage, such as its <title> - A webpage’s title appears in a browser’s tab. ex)tistory의 '새로운글쓰기' |
- Link tag [링크]
: <a> tag is used to link to internal pages, external pages or content on the same page.
: href attribute is always with '<a> tag (=anchor tag)' to be completed
: target attribute will open new websites in a new tab.
<a href="https://www.wikipedia.org/" target="_blank">This Is A Link To Wikipedia</a>
- Link to relative page [상대경로]
: The ./ tells the browser to look for the file in the current folder.
: it covers with a relative file and a local file, instead of an absolute path like URL
<a href="./contact.html">Contact</a>
- Link with an image file, not text
<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank">
<img src="https://www.Prickly_Pear_Closeup.jpg" alt="A red prickly pear fruit"/></a>
- Link to same page things
: 'href #idname' in anchor tag -> it will jump to a certain idname
<p id="top">This is the top of the page!</p>
<h1 id="bottom">This is the bottom! </h1>
<ol>
<li><a href="#top">Top</a></li>
<li><a href="#bottom">Bottom</a></li>
</ol>- How to make Comments(주석)
<!-- <p> Test Code </p> -->-HTML tag
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
HTML elements reference - HTML: HyperText Markup Language | MDN
This page lists all the HTML elements, which are created using tags. They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one. E
developer.mozilla.org
- How to do HTML debugging [HTML 디버깅하는 법]
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML
Debugging HTML - Learn web development | MDN
When writing code of some kind, everything is usually fine, until that dreaded moment when an error occurs — you've done something wrong, so your code doesn't work — either not at all, or not quite how you wanted it to. For example, the following shows
developer.mozilla.org
- HTML debug detecter
Ready to check - Nu Html Checker
This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change
validator.w3.org
- [Fashion Blog] Project Code
<!DOCTYPE html>
<html>
<head>
<title>Everyday with Isa</title>
</head>
<body>
<a href="#contact">
<img src="https://content.codecademy.com/courses/learn-html/elements-and-structure/profile.jpg"/></a>
<h3>by Isabelle Rodriguez | 1 day ago</h3>
<h1>An Insider’s Guide to NYFW</h1>
<img src="https://content.codecademy.com/courses/learn-html/elements-and-structure/image-one.jpeg"/>
<p><a href="https://en.wikipedia.org/wiki/New_York_Fashion_Week" target="_blank">NYFW</a> can be both amazingly fun & incredibly overwhelming, especially if you’ve never been. Luckily, I’m here to give you an insider’s guide and make your first show a pleasurable experience. By taking my tips and tricks, and following your gut, you’ll have an unforgettable experience!</p>
<h2>Getting Tickets & Picking the Shows</h2>
<img src="https://content.codecademy.com/courses/learn-html/elements-and-structure/image-two.jpeg"/>
<p>If you’re lucky or connected you can get an invite, sans the price tag. But I wasn’t so lucky or connected my first 2 years so I’m here to help you out. First, plan out which shows are most important to you and make a schedule and this is a biggie: SET A BUDGET. If you’re worrying about blowing your cash the whole time you won’t have fun. Then check out prices, days, and times and prioritize the designers you want to see most. Lastly, purchase your tickets and get excited!</p>
<h2>Dressing for the Shows</h2>
<img src="https://content.codecademy.com/courses/learn-html/elements-and-structure/image-three.jpeg"/>
<p>Always be true to your own sense of style, if you don’t you’ll be uncomfortable the whole time and it will show. Remember, NYFW is about expressing yourself and taking in what the designers have chosen to express through their new lines. Also it’s important to wear shoes you’ll be comfortable in all day. Obviously you want to look good, but you’ll be on your feet all day long, so be prepared.</p>
<h4>Related Content</h4>
<ul>
<li>How To Style Boyfriend Jeans</li>
<li>When Print Is Too Much</li>
<li>The Overalls Trend</li>
<li>Fall’s It Color: Blush</li>
</ul>
<div id="contact">
<p> <strong>email</strong>: isa@fashionblog.com | <strong>phone</strong>: 917-555-1098 | <strong>adress</strong>: 371 284th St, New York, NY, 10001</p>
</div>
</body>
</html>https://content.codecademy.com/courses/learn-html/elements-and-structure/fashion.html
Everyday with Isa
by Isabelle Rodriguez | 1 day ago An Insider's Guide to NYFW NYFW can be both amazingly fun & incredibly overwhelming, especially if you've never been. Luckily, I'm here to give you an insider's guide and make your first show a pleasurable experience. By t
content.codecademy.com
- Semantic HTML? [의미론적 HTML]
:Semantic elements provide information and meaning about the content between the opening and closing tags.
(It is good for 1.Accessibility 2.SEO(search engine optimization) 3.Easy to understand)
* Below tags can be represented like-> <div id="article">, but it's good to use below semantic tag.
- Header & Nav
: It is used for menu block, and it is clear when you use <div> tags that include some id.
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>- Main & Footer
: The main tag includes important content, while the footer tag includes less important things.
<main>
<p>This is where the main content will go once the page is built out!</p>
</main>
<footer>
<p>Contact me at +1 234 567 8910 </p>
</footer>- Section & Article
<section>
<h2>Fun Facts About Cricket</h2>
<article>
<p>A single match of cricket can last up to 5 days.</p>
</article>
</section>| <section> | defines elements in a document, such as chapters, headings, or any other area of the document with the same theme |
| <article> | - holds content that makes sense on its own. - It is important to note that a <section> element could also be placed in an <article> element depending on the context. |
- Aside tag
: used to mark additional information inside <article> or <section> tags (that means something important)
- Figure tag
: it contains an img tag, also including caption about images.
<figure>
<img src="overwatch.jpg">
<figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>- Audio tag
: it can contain audio files with <source> tag, while the 'controls' attribute automatically displays the audio controls into the browser such as play and mute.
<audio controls>
<source src="https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3" type="audio/mp3">
</audio>- Video & Embed
<video src="https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4" controls>
the video is unable.
</video>
<embed src="https://content.codecademy.com/courses/SemanticHTML/dog-on-beach.gif"/>| video tag | includes video into the website |
| embed tag | - can embed any media content including videos, audio files, and gifs from an external source - deprecated tag and other alternatives, such as <video>, <audio> and <img>, should be used in its place |
- Link about Semantic HTML
https://www.internetingishard.com/html-and-css/semantic-html/
Semantic HTML | HTML & CSS Is Hard
A friendly tutorial for developing meaningful web pages
www.internetingishard.com
- Why HTML has accessibility?
https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412
Writing HTML with accessibility in mind
An introduction to web accessibility. Tips on how to improve your markup and provide users with more and betters ways to navigate and…
medium.com
- [NY city Blog] project code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<header>
<h1>New York City</h1>
<main>
<section id="blog">
<article>
<p>New York City is made up of five boroughs which include Queens, Manhattan, Brooklyn, the Bronx, and Staten Island. The city is the home of approximately 8 million people. In 1876, France gifted the City of New York what is known as the Statue of Liberty, which is currently located on Ellis Island commonly visited by tourists. However, it took 10 years to assemble and therefore wasn’t unveiled until 1886. Another tourist destination is Times Square. Times Square is commonly known for the big buildings, Broadway shows, and bright neon signs. This famous location was named after The New York Times after the Times moved to that location. Prior to that, it was named Longacre Square. New York City is also known for its bridges that connect the boroughs and allow ease of transportation.</p>
</article>
</section>
<figure>
<img src="https://content.codecademy.com/courses/Semantic%20HTML/statue-of-liberty.jpeg"/>
<figcaption>This is the Statue of Liberty, a popular tourist attraction located on Ellis Island.</figcaption>
</figure>
<aside>
<p>New York City is very popular for the variety of great food it has. Some of the top food items in NYC include:</p>
<ol>
<li>Pizza</li>
<li>Bagels</li>
<li>Burgers and Sandwiches</li>
<li>Ramen</li>
<li>Tacos</li>
<li>Pasta</li>
<li>Desserts</li>
</ol>
</aside>
<section id="media">
<article>
<h2>The Scenery in NYC</h2>
<p>While the view in the city is beautiful, the sounds are not as lovely. Below you'll see an example of the view and the sounds you'll deal with in NYC on a daily basis.</p>
</article>
<video controls src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-skyline-timelapse.mp4"></video>
<embed src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-skyline.jpeg"/>
<audio controls src="https://content.codecademy.com/courses/Semantic%20HTML/nyc-sounds.mov"></audio>
</section>
</main>
<footer id="about">
<p>Posted by:</p>
<p>Contact information: Blogger@NYC.com</p>
</footer>
</header>
</body>
</html>'Web' 카테고리의 다른 글
| [CSS] 7) 색 표현법, 색 넣기 (#HSLA # RGB) (0) | 2021.01.19 |
|---|---|
| [Front-end] 6) Github로 웹페이지 만들기/Semantic CSS (0) | 2021.01.19 |
| [Front-end] 5)CSS 비주얼 규칙/ Visual Studio Code로 웹페이지 만들기 (0) | 2021.01.17 |
| [CSS] 4)CSS 구조/선택자 Selector (0) | 2021.01.17 |
| [Front-end] 1)Brief info about Front-end web development (0) | 2021.01.10 |
