{"id":4646,"date":"2023-12-20T16:35:15","date_gmt":"2023-12-20T16:35:15","guid":{"rendered":"https:\/\/nikola-breznjak.com\/blog\/?p=4646"},"modified":"2023-12-20T16:40:31","modified_gmt":"2023-12-20T16:40:31","slug":"this-is-how-your-parents-used-to-build-websites","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/this-is-how-your-parents-used-to-build-websites\/","title":{"rendered":"This is How Your Parents Used to Build Websites"},"content":{"rendered":"<h3>TL;DR<\/h3>\n<blockquote>\n<p>Hey future web wizards! Are you ready to embark on your journey into the vast world of web development? This post is your beginner-friendly guide to HTML. We\u2019ll break down the essentials, infuse some humor, and provide plenty of examples for you to experiment with. By the end of this, you&#8217;ll be well on your way to crafting your first web page. Let\u2019s dive into the world of tags and elements and make them your new best friends!<\/p>\n<\/blockquote>\n<p>The intro you just read might sound like a blast from the past \u2013 a time when all aspiring web developers had were books and a computer (if they were lucky). Back then, the web was a simpler place, primarily <strong>text<\/strong> and <strong>links<\/strong>.<\/p>\n<p>But hold on, we&#8217;re not just reminiscing about the old days. Even though web development has evolved tremendously (and yes, it\u2019s a lot cooler now), understanding the basics of HTML is still crucial. So, even if you\u2019re planning to leap into more advanced topics (which we\u2019ll cover in the next blog post), this article is worth your time to grasp the fundamentals of HTML tags.<\/p>\n<p>In this blog post we&#8217;ll cover HTML basics. In the <a href=\"https:\/\/nikola-breznjak.com\/blog\/javascript\/this-is-how-your-parents-used-css-and-javascript\/\">next one<\/a> we&#8217;ll touch on CSS and JavaScript.<\/p>\n<h3>Setting the Scene<\/h3>\n<p>Picture this: It&#8217;s your first day as an aspiring web developer, buzzing with ideas and ready to make your mark on the internet. But there\u2019s a key skill you need to master first: HTML. Don\u2019t fret \u2013 it\u2019s far from daunting. HTML is the skeleton of all websites, and together, we\u2019re going to unravel its mysteries.<\/p>\n<h4>Why HTML, Anyway?<\/h4>\n<p>HTML stands for HyperText Markup Language. It&#8217;s the skeleton of all web pages. Think of it as the foundation of a house &#8211; without it, you can&#8217;t build anything stable. HTML is where every web developer begins their journey. It&#8217;s simple, powerful, and the stepping stone to more complex web technologies.<\/p>\n<h4>OK, but What&#8217;s in a Markup Language?<\/h4>\n<p>Markup languages are all about annotating text to give it structure and meaning. HTML does this by using tags to turn plain text into a structured, visually appealing web page. It&#8217;s like taking a plain old document and adding magic to make it a web page.<\/p>\n<p>\u26a0\ufe0f And, yes, to settle the debate: No, HTML is not programming. Sorry, not sorry.<\/p>\n<h3>Your First HTML Tags<\/h3>\n<p>Let&#8217;s start with the basics. Every HTML document has some key tags:<\/p>\n<ul>\n<li><code>&lt;!DOCTYPE html&gt;<\/code>: This declaration defines the document type and HTML version<\/li>\n<li><code>&lt;html&gt;<\/code>: The root element that wraps the entire content<\/li>\n<li><code>&lt;head&gt;<\/code>: This contains meta-information about the document, like its title<\/li>\n<li><code>&lt;body&gt;<\/code>: The meat of the page \u2013 this is where all your content will go<\/li>\n<\/ul>\n<h4>Creating Your First HTML Page<\/h4>\n<p>Open up your favorite text editor (Visual Studio Code, Sublime Text, Vim, &#8230; \u2013 take your pick) and let&#8217;s get coding. Copy the following code into a file and name it <code>index.html<\/code>:<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;My First Web Page&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Hello, World!&lt;\/h1&gt;\n    &lt;p&gt;Welcome to my first web page.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Now open this <code>index.html<\/code> file in your favorite browser (Chrome, Safari, Firefox, &#8230;). Usually, just doubleclicking the file should make it automatically open in your default browser.<\/p>\n<p>Voila! You&#8217;ve just created your first web page that should look like this:<br \/>\n<img decoding=\"async\" src=\"https:\/\/i.imgur.com\/bU9RhpN.png\" alt=\"\" \/><\/p>\n<h4>Understanding the HTML Structure<\/h4>\n<p>HTML documents are structured as a tree of elements. Each element has an opening tag (<code>&lt;tag&gt;<\/code>) and a closing tag (<code>&lt;\/tag&gt;<\/code>). Some elements are self-closing, like <code>&lt;img \/&gt;<\/code> (for inserting images) and <code>&lt;br \/&gt;<\/code> (for inserting a new line). Think of it as a family tree, but for your web content.<\/p>\n<h4>Dive into Elements and Attributes<\/h4>\n<p>HTML elements can have attributes that provide additional information about the element. For example, <code>&lt;a href=&quot;http:\/\/www.nikola-breznjak.com\/&quot;&gt;My site&lt;\/a&gt;<\/code> uses the <code>href<\/code> attribute to define the link&#8217;s destination.<\/p>\n<h4>Text Formatting and Layout<\/h4>\n<p>HTML offers a range of elements for formatting text:<\/p>\n<ul>\n<li><code>&lt;h1&gt;<\/code> to <code>&lt;h6&gt;<\/code>: Headings from most to least important<\/li>\n<li><code>&lt;p&gt;<\/code>: Paragraphs<\/li>\n<li><code>&lt;strong&gt;<\/code> and <code>&lt;em&gt;<\/code>: Bold and italic text for emphasis<\/li>\n<li><code>&lt;ul&gt;<\/code> and <code>&lt;ol&gt;<\/code>: Unordered (bullets) and ordered (numbers) lists<\/li>\n<li><code>&lt;li&gt;<\/code>: List items<\/li>\n<li><code>&lt;div&gt;<\/code>: A generic container for content, great for layout and styling purposes<\/li>\n<\/ul>\n<h4>Adding Images<\/h4>\n<p>To add an image, use <code>&lt;img src=&quot;image.jpg&quot; alt=&quot;Description&quot;&gt;<\/code>. Change the <code>image.jpg<\/code> with an URL of an actual image. For example, edit the index.html file to look like this:<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;My First Web Page&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Hello, World!&lt;\/h1&gt;\n    &lt;p&gt;Welcome to my first web page.&lt;\/p&gt;\n    &lt;img src=&quot;https:\/\/i.imgur.com\/AoX2x7f.png&quot; alt=&quot;VIM for Life&quot;&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>And you should get this:<br \/>\n<img decoding=\"async\" src=\"https:\/\/i.imgur.com\/FIiMPP4m.png\" alt=\"\" \/><\/p>\n<h4>Adding Links<\/h4>\n<p>To create a link, use the <code>a<\/code> tag. Example: <code>&lt;a href=&quot;http:\/\/www.google.com&quot;&gt;Link to Google.com&lt;\/a&gt;<\/code>.<\/p>\n<h4>Forms and User Input:<\/h4>\n<p>Forms are what you should use to get some input from users. Use the <code>&lt;form&gt;<\/code> element to create an input area. Inside, use <code>&lt;input&gt;<\/code>, <code>&lt;textarea&gt;<\/code>, <code>&lt;button&gt;<\/code>, and other form elements to gather user input.<\/p>\n<p>For example, here&#8217;s the usual login form:<\/p>\n<pre><code>&lt;form action=&quot;\/submit-your-login-form&quot; method=&quot;post&quot;&gt;\n    &lt;label for=&quot;username&quot;&gt;Username:&lt;\/label&gt;\n    &lt;input type=&quot;text&quot; id=&quot;username&quot; name=&quot;username&quot; required&gt;\n\n    &lt;label for=&quot;password&quot;&gt;Password:&lt;\/label&gt;\n    &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; required&gt;\n\n    &lt;button type=&quot;submit&quot;&gt;Login&lt;\/button&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>If you add that to the <code>index.html<\/code> file, you should see this in your browser (when you refresh the page):<br \/>\n<img decoding=\"async\" src=\"https:\/\/i.imgur.com\/pV2Ck1L.png\" alt=\"\" \/><\/p>\n<h4>Embedding Media<\/h4>\n<p>You can embed videos and audio in HTML5 using <code>&lt;video&gt;<\/code> and <code>&lt;audio&gt;<\/code> tags. Here&#8217;s an example for video:<\/p>\n<pre><code>&lt;video width=&quot;320&quot; height=&quot;240&quot; controls&gt;\n    &lt;source src=&quot;movie.mp4&quot; type=&quot;video\/mp4&quot;&gt;\n    &lt;source src=&quot;movie.ogg&quot; type=&quot;video\/ogg&quot;&gt;\n    Your browser does not support the video tag.\n&lt;\/video&gt;<\/code><\/pre>\n<p>and here&#8217;s the example for audio:<\/p>\n<pre><code>&lt;audio controls&gt;\n    &lt;source src=&quot;audio.mp3&quot; type=&quot;audio\/mpeg&quot;&gt;\n    &lt;source src=&quot;audio.ogg&quot; type=&quot;audio\/ogg&quot;&gt;\n    Your browser does not support the audio element.\n&lt;\/audio&gt;<\/code><\/pre>\n<p>Of course, you would have to have the video and audio formats to try this out. You can Google, or create some of your own. Or, for the sake of quickly testing this out, <a href=\"https:\/\/drive.google.com\/file\/d\/1tHhlLsuAjlNR65ZjR7xKZNli-uYO7V7C\/view?usp=sharing\">here&#8217;s a link<\/a> to an MP3 of a crowbar sound from a cult game Half Life.<\/p>\n<h3>Building a Simple Personal Portfolio Site with HTML<\/h3>\n<p>Let&#8217;s enhance our basic HTML skills by creating a simple personal portfolio page. This website will have four main sections: a header, an about me section, a projects section, and a contact section.<\/p>\n<h4>Creating the Basic Structure<\/h4>\n<p>Start by defining the structure of your page. Open your text editor and create a new file named <code>portfolio.html<\/code>. Here&#8217;s how you&#8217;ll structure it:<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;My Personal Portfolio&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;header&gt;\n        &lt;!-- Header content goes here --&gt;\n    &lt;\/header&gt;\n\n    &lt;section id=&quot;about&quot;&gt;\n        &lt;!-- About me content goes here --&gt;\n    &lt;\/section&gt;\n\n    &lt;section id=&quot;projects&quot;&gt;\n        &lt;!-- Projects list goes here --&gt;\n    &lt;\/section&gt;\n\n    &lt;section id=&quot;contact&quot;&gt;\n        &lt;!-- Contact information goes here --&gt;\n    &lt;\/section&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<h4>Crafting the Header<\/h4>\n<p>The header will contain your name and a navigation menu.<\/p>\n<pre><code>&lt;header&gt;\n    &lt;h1&gt;John Doe&lt;\/h1&gt;\n    &lt;nav&gt;\n        &lt;ul&gt;\n            &lt;li&gt;&lt;a href=&quot;#about&quot;&gt;About Me&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#projects&quot;&gt;Projects&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#contact&quot;&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/nav&gt;\n&lt;\/header&gt;<\/code><\/pre>\n<h4>The About Me Section<\/h4>\n<p>Here, you&#8217;ll introduce yourself. Include a brief paragraph and maybe a profile picture.<\/p>\n<pre><code>&lt;section id=&quot;about&quot;&gt;\n    &lt;h2&gt;About Me&lt;\/h2&gt;\n    &lt;img src=&quot;profile.jpg&quot; alt=&quot;John Doe&quot; \/&gt;\n    &lt;p&gt;Hi, I&#039;m John Doe, a passionate web developer...&lt;\/p&gt;\n&lt;\/section&gt;<\/code><\/pre>\n<h4>Showcasing Projects<\/h4>\n<p>In the projects section, list some of the work you&#8217;ve done. Use <code>&lt;ul&gt;<\/code> for the list and <code>&lt;li&gt;<\/code> for each project.<\/p>\n<pre><code>&lt;section id=&quot;projects&quot;&gt;\n    &lt;h2&gt;Projects&lt;\/h2&gt;\n    &lt;ul&gt;\n        &lt;li&gt;&lt;a href=&quot;http:\/\/example.com\/project1&quot;&gt;Project 1&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=&quot;http:\/\/example.com\/project2&quot;&gt;Project 2&lt;\/a&gt;&lt;\/li&gt;\n        &lt;!-- Add more projects here --&gt;\n    &lt;\/ul&gt;\n&lt;\/section&gt;<\/code><\/pre>\n<h4>The Contact Section<\/h4>\n<p>Include your contact information or a form for visitors to reach out to you.<\/p>\n<pre><code>&lt;section id=&quot;contact&quot;&gt;\n    &lt;h2&gt;Contact Me&lt;\/h2&gt;\n    &lt;p&gt;Email: john.doe@example.com&lt;\/p&gt;\n    &lt;!-- You can add a contact form here in future --&gt;\n&lt;\/section&gt;<\/code><\/pre>\n<h4>Adding Some Styling<\/h4>\n<p>While CSS is primarily used for styling, you can add inline styles directly in your HTML to change the look of your page. For example:<\/p>\n<pre><code>&lt;style&gt;\n    body {\n        font-family: Arial, sans-serif;\n    }\n    header, section {\n        margin-bottom: 20px;\n    }\n    nav ul {\n        list-style-type: none;\n    }\n    nav ul li {\n        display: inline;\n        margin-right: 10px;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Place this <code>&lt;style&gt;<\/code> tag within the <code>&lt;head&gt;<\/code> section of your HTML.<\/p>\n<h4>Test and Iterate<\/h4>\n<p>This is how the full <code>portfolio.html<\/code> file should look like:<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;My Personal Portfolio&lt;\/title&gt;\n\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n        }\n        header, section {\n            margin-bottom: 20px;\n        }\n        nav ul {\n            list-style-type: none;\n        }\n        nav ul li {\n            display: inline;\n            margin-right: 10px;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;header&gt;\n        &lt;h1&gt;John Doe&lt;\/h1&gt;\n        &lt;nav&gt;\n            &lt;ul&gt;\n                &lt;li&gt;&lt;a href=&quot;#about&quot;&gt;About Me&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=&quot;#projects&quot;&gt;Projects&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=&quot;#contact&quot;&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;\n\n    &lt;section id=&quot;about&quot;&gt;\n        &lt;h2&gt;About Me&lt;\/h2&gt;\n        &lt;img src=&quot;profile.jpg&quot; alt=&quot;John Doe&quot; \/&gt;\n        &lt;p&gt;Hi, I&#039;m John Doe, a passionate web developer...&lt;\/p&gt;\n    &lt;\/section&gt;\n\n    &lt;section id=&quot;projects&quot;&gt;\n        &lt;h2&gt;Projects&lt;\/h2&gt;\n        &lt;ul&gt;\n            &lt;li&gt;&lt;a href=&quot;http:\/\/example.com\/project1&quot;&gt;Project 1&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;http:\/\/example.com\/project2&quot;&gt;Project 2&lt;\/a&gt;&lt;\/li&gt;\n            &lt;!-- Add more projects here --&gt;\n        &lt;\/ul&gt;\n    &lt;\/section&gt;\n\n    &lt;section id=&quot;contact&quot;&gt;\n        &lt;h2&gt;Contact Me&lt;\/h2&gt;\n        &lt;p&gt;Email: john.doe@example.com&lt;\/p&gt;\n        &lt;!-- You can add a contact form here in future --&gt;\n    &lt;\/section&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Open it up in a browser to see your work. It won&#8217;t look like a polished website yet, but you&#8217;ll see all your content structured according to your HTML.<\/p>\n<h3>Conclusion<\/h3>\n<p>Congratulations! You&#8217;ve just built a simple yet functional personal portfolio site using HTML. This is just the beginning of your journey into web development. As you learn more about HTML, CSS, and JavaScript, you&#8217;ll be able to enhance your site with better styling and functionality. Keep experimenting, keep learning, and most importantly, have fun with it!<\/p>\n<p>In the <a href=\"https:\/\/nikola-breznjak.com\/blog\/javascript\/this-is-how-your-parents-used-css-and-javascript\/\">next blog post<\/a> we&#8217;ll cover CSS and JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TL;DR Hey future web wizards! Are you ready to embark on your journey into the vast world of web development? This post is your beginner-friendly guide to HTML.&hellip;<\/p>\n","protected":false},"author":1,"featured_media":4647,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[],"class_list":["post-4646","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/4646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=4646"}],"version-history":[{"count":0,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/4646\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/4647"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=4646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=4646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=4646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}