WebDev Starter Pack - HTML for beginners! The interface's structure from WWW!

WebDev Starter Pack - HTML for beginners! The interface's structure from WWW!

By andrercules | devnewbies | 18 Jun 2020


Hello guys, Andrercules (or Koro-sensei for weaboos) here, today i'm gonna talk about the power one the most known languages of web development, to be a beginner web developer front end: HTML.

If you want to be a web developer, in a certain moment you want to decide your side of the force between back-end and front end, and i already gave an overview about it!

The front end side is the "client" side in short talk and the HTML is the main way to construct interfaces over the internet, and it has been improving its own way thanks to W3C (World Wide Web consortium) the consortium that improves the WWW! So let's start!


What is HTML?

HTML or HyperText Markup Language was created in the beginning of the world wide web to be the structure of all websites. If you access any website in the WWW its structure was written on HTML! 

 

And it has been improved by the W3C over the years and your main version now is the version 5, most known HTML5!

I'll be focus in this article about this version!

HTML is a document extension that follow some patterns to be understandable by the browser, so you need to structure your website correctly or will be a mess then you can create your style above your HTML code!

 


Structure of HTML5

HTML5 is the stable main version of the world wide web nowadays, since 2009 when was officially released for every developer, it came with a "new" arrangement to structure with a easy understand!

HTML5 cames to replace HTML4.1 since 1999 and your structure is following a pattern that has been improving over the years, called by "semantic" structure:

da16faea56d0aeb3a612509b3a426185aab90bb67ab1e12273a295bf0e9d1625.png

Following this pattern to structure your webpage, makes it easier to understand each part inside a website with HTML!


The markups in HTML

 

HTML is made by markups, you construct your website using markups and look likes a lot a puzzle sometimes, but is not difficult! you just need to know what to use and when to use.

This is the main markups to every beginner will need to start:

  • <html>  That's how we start our .html document above it, just the doctype </html>
  • <head> Our meta tags, favicon, title of your website, some javascript and CSS (more in the future), information about the page in general comes inside head!</head>
  • <body> The body to the development! The middle way to start your structure that i'll talk bellow! </body>

Now that you know the "outside" of the website you'll need to focus in the body, here we can have a lot of kind of HTML markup but i'll talk the main that you'll use

<body>

  • <div> A generic quarter inside the structure, in the beginning of HTML 'til the 4 this was the main way to create the structure in the WWW. </div>
  • <ul> Create a unordered list inside html using <li>list a</li> <li>list b</li> </ul>
  • <ol> Create a ordered list <li>number one</li> <li>number two</li> </ol>
  • <header> Create your header in the website! Now with HTML5 made it really easier to understand what each tag do</header>
  • <nav>Your main menu inside here in the website, you can use ul with lis to create the menus inside it!</nav>
  • <main> The main place of your website structure, where will be write all the content! you must need just one of main inside all the html document!</main>
  • <article> Main used when you write articles like a blog! Where starts your post inside the blog for example</article>
  • <section> The most commonly HTML5 tag used now, before it was div! But both can be used! </section>
  • <footer> The last content of your webpage normally your credits! </footer>
  • <form> Starting a form inside your html, inside your form will have inputs for texts, this is one of the ways to send information to your server as I said in this article about HTTP server! </form>
  • <input type="text" placeholder="your name"> Inputs is the main way to your user interacts with your website, he can write the things you need with a <label> about this input! So this will help him about what information it'll give you! There is a lot of input types in HTML so you can learn about them more here.

Inside HTML you have some markups specials for paragraphs and titles!

  • <h1> This is the heading 1 there is <h1> 'til <h6>, so this is mainly used when you need a title call in your website!</h1>
  • <p>You can start paragraph everywhere inside the last tags inside the body! Mainly used when you have paragraphs (oh rly)</p>
  • <span> Most used for symbols that occupies space inside a paragraph or div! </span>
  • <strong>All letter inside will be in bold form! But not just that, it'll give a importance to the bold letter! mainly to SEO crawlers that searching about content in your website! (good theme for the future)</strong>

11d09a1c5ae143496dcbc6b4a2c27d9683a2938bb49e90ffa6d5f42545f76e17.png

Using H1 inside header!

 

Look how a HTML document can be following the semantic pattern:

02acd6db3dceb2470a21a7e549a904b7f8a68605dcdbb0aafd9a873203ec55aa.png

</body>


How to pratice HTML?

That's a really easy question, you can create an HTML document in your notepad in your OS and save as .html document, so you can open but if you want a quick start in HTML world, can be using repl.it here

5a865efeeeaec80c96616d980492008c672c0b2ab1cb7b933ff1552f873ec960.png

You put type as "All the files" then you can save as .html in your notepad for example!

Even tough you can use notepad to create html, you must be seeing that's not easily to write so many code there and it'll be turning into a spider web so... You can download VSCode a "notepad" that was created by microsoft to work with web development and it has been really good!

6b5302ac6f714a28561fb807c536e538aa9bff3fda3630b29a176094f1aa2e4d.png

There is a lot of things in VSCode, the main step to start a real web developer is download him here!

 

So guys, that's it! Tried to do a briefing about HTML with the main tags that you'll use around the career being a front-end developer... but... Where is the style of my website??? You wonder to yourself... but I don't forget! You'll need a guy called by CSS, a nice theme that I will briefly talk about later, so tip if you enjoy! <strong> thank you! </strong> :)


andrercules
andrercules

front end developer, and follow me on twt: https://twitter.com/andrecrjr


devnewbies
devnewbies

Web development, Front-end, Telegram Bot, Javascript in a newbie way, follow me to good development things!

Send a $0.01 microtip in crypto to the author, and earn yourself as you read!

20% to author / 80% to me.
We pay the tips from our rewards pool.