Diana Parker
shared a link
HTML Tutorial (Beginner) - Learn HTML fast by example — delidded.com
February 24, 2018 March 27, 2018 HTML HTML (HyperText Markup Language) is the language of the web,
and if you want to make websites, you'll need to know how it works. In this guide, we're going to teach you all the important parts of HTML as fast as possible
(through a series of short examples and practice problems at the end).
You'll soon see HTML is a very simple and easy to understand language.
You don't need hundreds of pages of explanation -- The code usually speaks for itself.
And when it doesn't, we'll give a brief explanation to make it clear. Please enable Javascript The example results will not be visible without Javascript. So, what does an HTML file look like? Example: <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>This is the page title</title>
</head>
<body>
YOUR HTML CODE GOES HERE
</body>
</html>
Result: Don't worry about understanding most of this file at this point.The important part for this guide is on lines 9 through 11.The <body> of an HTML document holds all of the HTML code that will be visible on the page. In the examples that follow, the only thing that will change in this file is what's on line 10 (inside the body). Practice in Editor The HTML <p> tag – Creating paragraphs Example: <p>My first paragraph.</p>
<p>My second paragraph.</p>
Result: In the example code here, we've only shown the code inside the <body> section
(since the rest of the HTML file is the same). Practice in Editor <em> tag – Emphasizing text Make something stand out Example: <em>This sentence has been emphasized.</em>
Result: Emphasized text is shown in italic by defaultHowever, you can style this tag however you want using CSS (the next thing you should learn after HTML) Practice in Editor <strong> tag – Strongly emphasized text Example: Some of this sentence has been <strong>strongly emphasized</strong> (but not all of it).
Result: Practice in Editor Used to organize your page and make it more readable Example: <h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>
Result: h1 (heading) tagUsually used to give a brief summary of what the page is about and is placed at the top of the page.
There's usually only 1 h1 heading per page.h2 tagUsually used to separate the page into different sections (and to let the reader know what the upcoming section is about).h3 tagUsed to break a section that already has an h2 heading into subsections.h4, h5, and h6 tagsThere are also h4, h5, and h6 tags, which can further organize your page, but they aren't used as often. Practice in Editor <ol> tag – Ordered lists Example: <ol>
<li>My first list item</li>
<li>My second list item</li>
<li>My third list item</li>
</ol>
Result: Practice in Editor <ul> tag – Unordered lists (bulleted lists) Example: <ul>
<li>My first list item</li>
<li>My second list item</li>
<li>My third list item</li>
</ul>
Result: Practice in Editor <a> tag – Linking to another page Example: <a href="https://www.delidded.com">Click here</a> (opens in same browser window).
<a href="https://www.delidded.com" target="_blank">Click here</a> (opens in a new window).
Result: href and target are attributes of the <a> tag.Attributes let you specify additional information to an HTML tag. Practice in Editor <img> tag – Adding images Example: <p>Here's the delidded.com logo:</p>
<img src="https://www.delidded.com/logo.png" alt="Delidded logo">
Result: src (source) attributeThe URL or location of the image.Since we're loading an image from our own website,
we could have left off the: https://www.delidded.com.
It would then look like: src="/logo.png".
You can also use this trick with the <a> tag (in the href attribute).alt (alternative) attributeShort description of the image (used by search engines and screen readers). Practice in Editor <br> tag – Adding line breaks Moving to another line Example: This line is
<br>
broken in half.
Result: br = breakNeeded because HTML ignores line breaks by defaultWithout the br tag, this would have appeared as 1 line Practice in Editor <pre> tag – Preformat some content Don't ignore extra spaces or line breaks Example: <pre>
This sentence
is formatted
exactly like I
want.
</pre>
Result: HTML ignores extra spaces and line breaks by default.Without the pre tag, this example would appear as only 1 line (with only 1 space between each word). Practice in Editor Show data as a table of rows and columns (like an Excel spreadsheet) Example: <table>
<tr>
<th>Heading for column 1</th>
<th>Heading for column 2</th>
<th>Heading for column 3</th>
</tr>
<tr>
<td>This is row 1, column 1</td>
<td>This is row 1, column 2</td>
<td>This is row 1, column 3</td>
</tr>
<tr>
<td>This is row 2, column 1</td>
<td>This is row 2, column 2</td>
<td>This is row 2, column 3</td>
</tr>
</table>
Result: tr = table rowth = table header cell (used to label what that row or column is about)td = table data cell Practice in Editor HTML Practice Problems Available on the following page: HTML Practice Problems HTML Forms – Accepting user input To learn about all the HTML form related tags (that allow you to accept user input),
check out our HTML Form Tutorial. CSS & JavaScript Tutorials CSS Tutorial - Styling your pages HTML (especially tables) can look pretty basic by default and could really use some styling.
However, you'll need to learn a new language to be able to do that: CSS. Learn CSS JavaScript Tutorial - Making your pages interactive Once you've learned CSS, the next thing to learn is JavaScript.
JavaScript will help you make your pages more interactive. Learn JavaScript
Read More
