What Do You Need to Know About Html
If yous desire to build a website, the first language that y'all demand to learn is HTML.
In this article, nosotros are going to go through the nuts of HTML. At the end, we are going to build a basic website using only HTML.
Here'southward a video you can scout if you want to supplement this article:
What Is HTML?
HTML, which stands for Hypertext Markup Linguistic communication, is a pretty simple language. It consists of different elements which we employ to construction a web folio.
What Are HTML Elements?
The element ordinarily starts with an opening tag, which consists of the name of the element. It's wrapped in opening and closing angle brackets. The opening tag indicates where the chemical element begins.
Like to the opening tag, the closing tag is also wrapped in opening and closing bending brackets. But information technology also includes a forwards slash earlier the element's name.
Everything inside the opening and endmost tags is the content.
But non all elements follow this pattern. Nosotros call those that don't empty elements. They simply consist of a single tag or an opening tag that cannot accept whatsoever content. These elements are typically used to insert or embed something in the document.
For example, the <img> element is used to embed an image file, or the <input> element is used to insert an input onto the folio.
<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50"> In the example above, the <img> element only consists of one tag that does not have any content. This chemical element is used to insert an paradigm file from Unsplash in the certificate.
How to Nest HTML Elements
<div form="my-listing"> <h4>My list:</h4> <ul> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> </div> Elements can exist placed inside other elements. This is called Nesting. In the example above, inside the <div> chemical element nosotros have an <h4> chemical element and an <ul> or unordered list element. And Similarly inside the <ul> element, there are three <li> or list item elements.
Bones nesting is quite straight-forward to understand. But when the page gets larger, nesting tin can become complicated.
Therefore, before working with HTML, think about the layout structure you lot would like to have. You can draw it out on a slice of paper or in your mind. It will assist a lot.
What are HTML Attributes?
Elements also accept attributes, which contain extra information about the element that volition not announced in the content.
<img src="https://images.unsplash.com/photo" width="50"> In the instance above, the <img> chemical element has 2 attributes: src or source to specify the path of the epitome, and width to specify the width of the image in pixels.
With this example, y'all tin run across the following characteristics of attributes:
- There is a space between attributes and the element name
- Attributes are added in the opening tag
- Elements can have many attributes
- Attributes usually take a name and a value: name="value"
But not every aspect has the same pattern. Some can exist without values, and we phone call them Boolean Attributes.
<button onclick="alert('Submit')" disabled>Push button</push> In this example, if we want to disable the button, all nosotros have to practice is laissez passer a disabled attribute without whatever values. This means that the presence of the attribute represents the true value, otherwise, the absence represents the false value.
Common HTML elements
At that place are in total more than than 100 elements. Merely ninety% of the time you lot will only utilise around twenty of the most common. I have put them into five groups:
Section elements
<div>, <bridge>, <header>, <footer>, <nav>, <chief>, <section> These elements are used to organize the content into different sections. They are usually self-explanatory, for example, <header> ordinarily represents a group of the introduction and navigation department, <nav> represents the section that contains navigation links, and and then on.
Text content
<h1> to <h6>, <p>, <div>, <bridge>, <ul>, <ol>, <li> These elements are used to organize content or text blocks. They are of import to accessibility and SEO. They tell the browser the purpose or structure of the content.
Forms
<form>, <input>, <button>, <label>, <textarea> These elements can exist used together to create forms that users can fill out and submit. Forms might be the trickiest part of HTML.
Images and Links
<img>, <a> These elements are used to insert an paradigm or create a hyperlink.
Others
<br>, <hr> These elements are used to add a suspension to the webpage.
Yous can notice all the elements on developer.mozilla.org. Just for beginners, you only need to know the about common ones.
Block-level vs inline HTML elements
By default, an chemical element can exist either block-level or an inline element.
Block-level elements are the elements that e'er kickoff on a new line and take upward the full width bachelor.
Inline elements are the elements that do not start on a new line and information technology only take up every bit much width as necessary.
2 elements that represent block-level and inline elements, respectively, are <div> and <span>. In this case, you lot tin can encounter that the <div> elements takes 3 lines, whereas the <span> chemical element only takes up 1 line.
But the question is: how do we know which ones are block-level elements and which ones are inline elements? Well, unfortunately y'all need to remember them. The easiest way is to remember which are inline elements – and the balance are block elements.
If we expect back at the about mutual HTML elements, inline elements include: <bridge>, <input>, <button>, <label>, <textarea>, <img>, <a>, <br>.
<p>This is a paragraph.</p> <!-- <p>I am not showing.</p> --> The purpose of comments is to include notes in the lawmaking to explain your logic or simply to organize your code.
HTML comments are wrapped in the special markers: <!-- and --> and they are ignored in the browser.
How to use HTML entities
What if you want to prove the text: the <p> tag defines a paragraph., but the browser interprets <p> as an opening tag for a new element? In this case, nosotros tin can use HTML entities similar in the following instance:
<p>the <p> tag defines a paragraph.</p> <p>the <p> ascertain a paragraph.</p> How to use emoji in HTML
In the mod spider web, nosotros tin can brandish emoji in HTML pretty easily, like this: 👻
<p>😀 Grinning Confront.</p> <p>🎂 Birthday</p> Common beginner mistakes in HTML
i. Tags/Chemical element names
Tags/Chemical element names are cAse-inSensitive. This means that they tin can be written in lowercase or capital letter, but it is recommended that y'all write everything in lowercase: <button> not <ButTon>.
ii. Closing tag
Failing to include a endmost tag is a common beginner mistake. Therefore, whenever you create an opening tag, immediately put in a closing tag.
3. Nesting
This is incorrect:
<div>Div 1 <span> Bridge two </div></span> The tags have to open up and close in a manner that they are inside or outside one another.
4. Single quotes and Double quotes
This is wrong:
<img src="https://images.unsplash.com/'> You cannot mix single quotes and double-quotes. You should e'er use double quotes and use HTML entities if needed.
How to build a unproblematic website with HTML
Private HTML elements are not plenty to create a website. So let's run into what more nosotros need to build a simple website from scratch.
How to create an HTML document
Offset, let's open Visual Studio Code (or your favorite code editor). In the folder of your choice, create a new file and proper noun it index.html.
In the index.html file, type ! (exclamation marker) and press enter. You will see something like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-viii"> <meta name="viewport" content="width=device-width, initial-calibration=1.0"> <title>Document</title> </head> <body> </trunk> </html> This is the minimal code that an HTML document should accept to make up a website. And here nosotros have:
-
<!DOCTYPE html>: First we have Doctype. For some weird historical reason in HTML nosotros have to include the doctype for everything to piece of work correctly. -
<html lang="en"></html>: The<html>chemical element wraps all the content on the page, also known as the root element. And nosotros should always include thelangattribute to declare the language of the page. -
<caput></head>: The<caput>element is a container for everything y'all desire to include, simply not content that you bear witness to your users. -
<meta charset="UTF-eight" />: The showtime meta chemical element is used to set the character ready to be UTF-viii, which includes most characters from written languages. -
<meta name="viewport" content="width=device-width, initial-scale=1.0" />: The second meta chemical element specifies the browser viewport. This setting is for a mobile-optimized site. -
<title>Document</title>: This is the<title>element. Information technology sets the title of the page. -
<body></body>: The<body>chemical element contains all the content on the folio.
How to build a pancake recipe folio
Alright, now that we have the starter lawmaking, allow'southward build a pancake recipe page. We are going to use the content from this AllRecipes Folio.
First, let's give the <title> element content of the pancakes recipe. Y'all will see the text on the spider web page tab change. In the <body> chemical element, let's create three elements: <header>, <main> and <footer> representing three sections.
In the header, we want to have the logo and the navigation. Therefore, let's create a div with the content ALL RECIPE for the logo.
For the navigation, let's use the <nav> chemical element. Within the <nav> element, we can use <ul> to create an unordered list. We want to have iii <li> elements for iii links: Ingredients, Steps, and Subscribe. The header code looks like this:
... <header> <div>ALL RECIPE</div> <nav> <ul> <li><a href="#ingredients">Ingredients</a></li> <li><a href="#steps">Steps</a></li> <li><a href="#subsribe">Subscribe</a></li> </ul> </nav> </header> ... ii. Build the Main Section
In the main section, starting time, nosotros want to accept a championship and an paradigm. Nosotros can use h1 for the title and <img> for the image (we can employ an epitome from Unsplash for complimentary):
... <chief> <h1>Good Old Fashioned Pancakes</h1> <img src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502" alt="pancake" width="250" /> </main> ... Next, we want to list all the ingredients. We tin apply <ol> to create an ordered list and <input type="checkbox" /> to create a checkbox.
Simply before that, nosotros can use <h2> to start a new content block. Nosotros also desire to add together the id attribute for <h2> then that the link in the navigation knows where to go:
... <main> ... <h2 id="ingredients">Ingredients</h2> <ol> <li><input type="checkbox" /> 1 ½ cups all-purpose flour</li> <li><input type="checkbox" /> iii ½ teaspoons baking powder</li> <li><input type="checkbox" /> 1 teaspoon salt</li> <li><input type="checkbox" /> ane tablespoon white sugar</li> <li><input type="checkbox" /> i ¼ cups milk</li> <li><input type="checkbox" /> ane egg</li> </ol> </principal> ... Subsequently the ingredients, nosotros want to list all the steps. Nosotros tin use <h4> for the step heading and <p> for the step content:
... <main> ... <h2 id="steps">Steps</h2> <h4>Step 1</h4> <p> In a large bowl, sift together the flour, baking powder, common salt and sugar. Brand a well in the center and pour in the milk, egg and melted butter; mix until smooth. </p> <h4>Step 2</h4> <p> Estrus a lightly oiled griddle or frying pan over medium-loftier estrus. Pour or scoop the batter onto the griddle, using approximately 1/4 loving cup for each pancake. Brown on both sides and serve hot. </p> </master> ... Alright, now that we are done with the main section, let's move on to the footer department.
In the footer, we want to have a subscribe course and copyright text.
For the subscribe form, we can use the <form> chemical element. Inside it, we can have an <input type="text"> for text input and a <button> for the submit button.
For the copyright text, we can simply employ a <div>. Discover here, we can utilize the HTML entity $re-create; for the copyright symbol.
We can add <br> to add together some space between the subscribe form and the copyright text:
... <footer> <h6 id="subscribe">Subscribe</h6> <class onsubmit="alert('Subscribed')"> <input blazon="text" placeholder="Enter Email Address" /> <button>Submit</button> </form> <br /> <div>© dakota kelly at Allrecipe.com</div> </footer> ... Alright now we are done! Here is the full code for reference:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta proper name="viewport" content="width=device-width, initial-scale=i.0" /> <title>Pancake Recipe</title> </head> <body> <header> <div>ALL RECIPE</div> <nav> <ul> <li><a href="#ingredients">Ingredients</a></li> <li><a href="#steps">Steps</a></li> <li><a href="#subsribe">Subscribe</a></li> </ul> </nav> </header> <main> <h1>Skilful Old Fashioned Pancakes</h1> <img src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8cGFuY2FrZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.two.1&auto=format&fit=crop&west=700&q=60" alt="pancake" width="250" /> <h2 id="ingredients">Ingredients</h2> <ol> <li><input type="checkbox" /> one ½ cups all-purpose flour</li> <li><input type="checkbox" /> 3 ½ teaspoons baking powder</li> <li><input blazon="checkbox" /> 1 teaspoon salt</li> <li><input type="checkbox" /> one tablespoon white carbohydrate</li> <li><input type="checkbox" /> i ¼ cups milk</li> <li><input type="checkbox" /> 1 egg</li> </ol> <h2 id="steps">Steps</h2> <h4>Step i</h4> <p> In a big bowl, sift together the flour, blistering pulverisation, table salt and sugar. Brand a well in the center and cascade in the milk, egg and melted butter; mix until smooth. </p> <h4>Step two</h4> <p> Estrus a lightly oiled griddle or frying pan over medium-high oestrus. Cascade or scoop the batter onto the griddle, using approximately one/4 loving cup for each pancake. Brown on both sides and serve hot. </p> </main> <hour /> <footer> <h6 id="subscribe">Subscribe</h6> <form onsubmit="warning('Subscribed')"> <input type="text" placeholder="Enter Email Address" /> <button>Submit</button> </grade> <br /> <div>© dakota kelly at Allrecipe.com</div> </footer> </body> </html> Conclusion
You can build a uncomplicated website with merely HTML. But to be able to build beautiful and functional websites, yous need to study CSS and JavaScript.
Y'all can follow me on social media or Youtube for future updates on these topics. But meanwhile, you tin can check out the freeCodeCamp Curriculum to do HTML by solving small tasks.
Otherwise, stay happy coding and run into you in future posts 👋.
__________ 🐣 About me __________
- I am the founder of DevChallenges
- Subscribe to my Channel
- Follow my Twitter
- Bring together Discord
Learn to code for gratuitous. freeCodeCamp's open up source curriculum has helped more than than 40,000 people get jobs every bit developers. Get started
Source: https://www.freecodecamp.org/news/html-basics-for-beginners/
0 Response to "What Do You Need to Know About Html"
Post a Comment