HTML Basics — Simple Web Page
By: Deniz Şimşek
Tags: HTML, Web Development, Fundamentals, Basics

HTML Basics — Simple Web Page

Fundamentals of Web Development

What is HTML?

It is the structure language of web. In other words the skeleton of any web page.

How it is used?

Lets make a Doughnuts Recipe webpage. Create a folder in your Desktop and name it as “donut_recipe” then open Notepad++ and before we type anything save it inside the donut_recipe folder as “recipe.html”

Why .html?

Because tell computer your .extension, and it recognises who you are.

After each edit you can Save the file, double click the recipe.html and see what it looks like.

<html>

Specify that it is a HTML page.

<html>

</html>

<head>, <body>

There are two parts of any webpage; head and body.

<html>

<head>

</head> <body>

</body>

</html>

<title>

In head, we define the title of the page.

<html>

<head>

<title>Doughnuts Recipe</title>

</head> <body>

</body>

</html>

<h1>

In body, we define the contents of the page. First the heading

<html>

<head>

<title>Doughnuts Recipe</title>

</head> <body>

<h1>How to make Doughnuts</h1>

</body>

</html>

<p>, <br />

Then the paragraphs. Because the text was too long we used break tag to break the line. (try erasing the <br> and see what happens)

<html>

<head>

<title>Doughnuts Recipe</title>

</head> <body>

<h1>How to make Doughnuts</h1>

<p>Homemade doughnuts are a bit of a project, but they’re less work than you might think, and the result is a truly great, hot, crisp doughnut.

Once you’ve mastered <br /> this basic recipe for a fluffy, yeasted doughnut, you can do pretty much anything you like in terms of glazes, toppings and fillings.</p>

</body>

</html>

<img />

Then I want to show an image(img) to get the reader exited. I will get the image from a source(src) via URL. Notice the image tag does not have a closing, this is because everything happens inside the tag.

<html>

<head>

<title>Doughnuts Recipe</title>

</head>

<h1>How to make Doughnuts</h1>

<p>Homemade doughnuts are a bit of a project, but they’re less work than you might think, and the result is a truly great, hot, crisp doughnut.

Once you’ve mastered <br> this basic recipe for a fluffy, yeasted doughnut, you can do pretty much anything you like in terms of glazes, toppings and fillings.</p>

<img src="https://static01.nyt.com/images/2014/12/14/magazine/14eat1/14mag-14eat.t_CA0-articleLarge.jpg" />

</body>

</html> How to make Doughnuts Homemade doughnuts are a bit of a project, but they’re less work than you might think, and the result is a truly great, hot, crisp doughnut.Once you’ve mastered

this basic recipe for a fluffy, yeasted doughnut, you can do pretty much anything you like in terms of glazes, toppings and fillings.

<h2>, <ul>, <li>

Now the ingridients will be listed. The order of the ingridients does not really matter so we will use an unordered list(ul). First we’ll define the list with ul tag then append the elements to it with li tag. Also remember the h1 tag, there are actually 6 heading tags (h1,h2…h6). They just represents the importance of the headings.

<html>

<head>

<title>Doughnuts Recipe</title>

</head>

<h1>How to make Doughnuts</h1>

<p>Homemade doughnuts are a bit of a project, but they’re less work than you might think, and the result is a truly great, hot, crisp doughnut. Once you’ve mastered <br> this basic recipe for a fluffy, yeasted doughnut, you can do pretty much anything you like in terms of glazes, toppings and fillings.</p>

<img src="

<h2>Ingridients</h2>

<ul>

<li>Milk</li>

<li>Dry Yeast</li>

<li>Eggs</li>

<li>Butter</li>

<li>Salt</li>

<li>Sugar</li>

<li>Flour</li>

<li>Oil</li>

</ul>

</body>

</html> How to make Doughnuts Homemade doughnuts are a bit of a project, but they’re less work than you might think, and the result is a truly great, hot, crisp doughnut. Once you’ve mastered

this basic recipe for a fluffy, yeasted doughnut, you can do pretty much anything you like in terms of glazes, toppings and fillings. https://static01.nyt.com/images/2014/12/14/magazine/14eat1/14mag-14eat.t_CA0-articleLarge.jpg " />IngridientsMilkDry YeastEggsButterSaltSugarFlourOil

<h2>, <ol>, <li>

Now the preperation comes. Because the preparation is an ordered process, we will use an ordered list(ol).

<html>

<head>

<title>Doughnuts Recipe</title>

</head>

<h1>How to make Doughnuts</h1>

<p>Homemade doughnuts are a bit of a project, but they’re less work than you might think, and the result is a truly great, hot, crisp doughnut. Once you’ve mastered <br> this basic recipe for a fluffy, yeasted doughnut, you can do pretty much anything you like in terms of glazes, toppings and fillings.</p>

<img src="

<ul>

<li>Milk</li>

<li>Dry Yeast</li>

<li>Eggs</li>

<li>Butter</li>

<li>Salt</li>

<li>Sugar</li>

<li>Flour</li>

<li>Oil</li>

</ul>

<h2>Preparation</h2>

<ol>

<li>Heat the milk until it is warm but not hot, about 90 degrees. In a large bowl, combine...</li>

<li>Using an electric mixer or a stand mixer fitted with a dough hook, beat the eggs, butter, sugar and salt into the yeast mixture. Add half of the flour...</li>

<li>Turn the dough out onto a well-floured surface, and roll it to 1/2-inch thickness. Cut out...</li>

<li>Put the doughnuts on two floured baking sheets so that there is plenty of room between each one. Cover with a kitchen towel, and...</li>

<li>About 15 minutes before the doughnuts are done rising, put the oil in a heavy-bottomed pot or Dutch oven...</li>

<li>Carefully add the doughnuts to the oil, a few at a time. If they’re too delicate to pick up with your fingers...</li>

</ol>

</body>

</html> How to make Doughnuts Homemade doughnuts are a bit of a project, but they’re less work than you might think, and the result is a truly great, hot, crisp doughnut. Once you’ve mastered

this basic recipe for a fluffy, yeasted doughnut, you can do pretty much anything you like in terms of glazes, toppings and fillings. https://static01.nyt.com/images/2014/12/14/magazine/14eat1/14mag-14eat.t_CA0-articleLarge.jpg " /> Milk

Dry Yeast

Eggs

Butter

Salt

Sugar

Flour

Oil PreparationHeat the milk until it is warm but not hot, about 90 degrees. In a large bowl, combine...Using an electric mixer or a stand mixer fitted with a dough hook, beat the eggs, butter, sugar and salt into the yeast mixture. Add half of the flour...Turn the dough out onto a well-floured surface, and roll it to 1/2-inch thickness. Cut out...Put the doughnuts on two floured baking sheets so that there is plenty of room between each one. Cover with a kitchen towel, and...About 15 minutes before the doughnuts are done rising, put the oil in a heavy-bottomed pot or Dutch oven...Carefully add the doughnuts to the oil, a few at a time. If they’re too delicate to pick up with your fingers...

<a>

We made a good HTML webpage, although it is a little ugly but we’ll handle that later. Before we move on though, I have a confession to make. I actually took the recipe from another source, and to prevent any plagiarism charge I need to attribute to the original source, so I will provide a link. To that we will add the following code after </ol>.

<a href="https://cooking.nytimes.com/recipes/1017060-doughnuts">NY Times Cooking</a> website.</p> This recipe is taken fromNY Times Cookingwebsite.

Final Code:

Final View:

So these are the one part of basics of any web page you see on the internet. There will be a second article for the other part.