Skip to main content

HTML , Tags , Body , Headings , Paragraphs , Images , Bullets , Linky ,

 Hyper Text Markup Language

Over the next couple of days, we'll be taking a crash course in HTML (Hyper Text Markup Language).


HTML is a markdown language. This means that it is used to tell webpages how to render on screen (basically how to look).


It is made up of a series of instructions in <tags> that surround text/image filenames, etc. and influence how they are displayed on screen. 

 

Tags

Now let's start creating a webpage and learning about the tags.

👉 Step 1 is to tell the file that this is an HTML page. These are the first and last tags on your page.

Notice that the last tag has a forward slash before the command. This means close or end this tag. With a few exceptions, tags come in pairs - an opening tag (no /) and a closing tag (with a /). 

<html>

  
</html> 

Head
The <head> tags contain a lot of invisible information about the page that you won't see on screen. Stuff like:

How to display your webpage on different devices (desktop vs. mobile device)
Keywords
The tag that we really care about inside head is the <title> tag. You do sort of see this on screen. It's the text that goes in the tab of the web page.

Also notice the indentation. This doesn't affect the way the code works like it does in Python, but it is standard practice to show how some tags are inside others. It also makes the code much easier to read.

👉 Let's create the head and title: 

<html>

  <head>
    <title>David's World Of Baldies</title>
  </head>
  
</html> 

As soon as you start building with Replit, your site is already on the world wide web!

Copy the URL into a new browser tab or just click the 'Open in a new tab' button to see it! 

 


Body
The visible contents of the page go in the <body> tag:

<html>


  <head>

    <title>David's World Of Baldies</title>

  </head>



  <body>

  

  </body>

  

</html> 


Headings

👉 Time for headings. This is the <h> tag. There are lots of different pre-defined heading sizes. They are numbered, with 1 being the largest.

<html>


  <head>

    <title>David's World Of Baldies</title>

  </head>



  <body>

    <h1>Dave's World of Baldies</h1>

    <h2>Welcome to our website!</h2>

  </body>

  

</html> 

Paragraphs

👉 The <p> tag creates paragraph text. Each new <p> tag will create a new paragraph with a vertical spacing from the line above. This will appear using your browser's default font settings. We'll learn about changing those in another lesson.

<body>

  <h1>Dave's World of Baldies</h1>

  <h2>Welcome to our website!</h2>


  <p>We all know that throughout history some of the greatest have been Baldies, let's see the epicness of their heads bereft of hair.</p>


  <h2>Gallery of Baldies</h2>

  <p>Here are some of the legends of the bald world.</p>

  

</body> 

Images

Inserting an image in HTML is a bit tricker than just copying and pasting. We have to:


Save the image in a folder

Name it (ideally with no spaces)

Tell the HTML where to find the image

👉 Let's insert an image.

 1.Drag & drop the image from your local files to the repl files pane.




2.Rename it (KEEP THE FILE EXTENSION).

 

3.Use the <img> tag in your HTML code to point to the image. The src part of the tag specifies the location and I can also set the width using % or pixels 


<body>
  <h1>Dave's World of Baldies</h1>
  <h2>Welcome to our website!</h2>

  <p>We all know that throughout history some of the greatest have been Baldies, let's see the epicness of their heads bereft of hair.</p>

  <h2>Gallery of Baldies</h2>
  <p>Here are some of the legends of the bald world.</p>

  <img src="picard.jpg" width = 30%>
  <p>Captain Jean Luc Picard: Baldest Star Trek captain, and legend.</p>
  
</body> 

We've only got one image here, but if you have lots then your file pane will get messy very quickly. Good practice is to keep your images in a folder (probably called images). 





 


👉 However, if you do this, then you have to change the src tag to point to that folder first, like this:

<img src="images/picard.jpg" width = 30%>

Bullets
But what makes Picard such a great Baldy? To educate our audience, let's give them a list!

👉 I'm going to use the <ul> (unordered list) to create a bullet point list. 


If I used the <ol> tag instead, I'd get a numbered list.

The <li> tag means list item, and each item in the list gets one.

<body>
  <h1>Dave's World of Baldies</h1>
  <h2>Welcome to our website!</h2>
  <p>We all know that throughout history some of the greatest have been Baldies, let's see the epicness of their heads bereft of hair.</p>
  <h2>Gallery of Baldies</h2>
  <p>Here are some of the legends of the bald world.</p>
  <img src="picard.jpg" width = 30%>
  <p>Captain Jean Luc Picard: Baldest Star Trek captain, and legend.</p>
  <ul>
    <li>Beautiful bald man</li>
    <li>Calm and cool under pressure</li>
    <li>All the Picard memes</li>
  </ul>
  
</body>

Linky Linky
To link between webpages, we need another page, so let's quickly make one: 



👉 Now, we can link to it. I've used the <a href> tag to create a link at the bottom of my page.

The href argument specifies the location of the webpage being linked. It's short for 'hypertext reference'.

<body>
  <h1>Dave's World of Baldies</h1>
  <h2>Welcome to our website!</h2>
  <p>We all know that throughout history some of the greatest have been Baldies, let's see the epicness of their heads bereft of hair.</p>
  <h2>Gallery of Baldies</h2>
  <p>Here are some of the legends of the bald world.</p>
  <img src="images/picard.jpg" width = 30%>
  <p>Captain Jean Luc Picard: Baldest Star Trek captain, and legend.</p>
  <ul>
    <li>Beautiful bald man</li>
    <li>Calm and cool under pressure</li>
    <li>All the Picard memes</li>
  </ul>
  <p><a href = "page2.html">Go to page 2</a></p>
  
</body>

👉 If I wanted to link to an external site about Picard, I'd just grab the full page URL and put that as the href argument. Like this: 

<p><a href = "https://memory-alpha.fandom.com/wiki/Star_Trek:_Picard">Captain Jean Luc Picard: Baldest Star Trek captain, and legend.</a></p>

To link an image, I would surround the <img> tags with <a> tags. 









 




Comments

Post a Comment

Popular posts from this blog

Automate! Automate!

 Making this customizable 👉So how about making our search user customizable? In the code below, I have: Asked the user to input an artist (line 14) Tidied up their input (line 15) formatted the search URL as an fString that includes the artist (line 19) Here's tAutomate! Automate! We are so close. I can taste it, folks! Massive kudos on getting this far! Today's lesson, however, will work best if you have one of Replit's paid for features (hacker plan or cycles). Free plan Repls 'fall asleep' after a while. Automation kinda relies on the Repl being always on. If you have hacker plan or you've bought some cycles, then you can enable always on in the drop down menu that appears when you click your Repl name (top left).he code: This is important because when our repl is always running, it can keep track of time and schedule events. 👉 I've set up a simple schedule that prints out a clock emoji every couple of seconds. It works like this: Import schedule librar...
Post a Comment
Read more

HTTP & Sessions

 HTTP & Sessions One of the main protocols (rules that govern how computers communicate) on the web is called HTTP. HTTP is what is known as a stateless protocol. This means that it doesn't 'remember' things. It's a bit like having a conversation with a goldfish. You can ask a question and get a reply, but when you ask a follow up question, the original has already been forgotten, as has who you are and what you were talking about. So if HTTP is stateless, how come my news site remembers to give me the weather for my home town, my preferred South American river based online store tells me when it's time to order more multivitamins, and I'm justifiably proud of my #100days success streak? The answer is......... Sessions Sessions are a way of storing files on your computer that allows a website to keep a record of previous 'conversations' and 'questions' you've asked. By using sessions, we can store this info about the user to access later....
Post a Comment
Read more

Incoming!

 Incoming! Today, we're going to learn how to deal with data from forms in Flask. 👉 To start, I've added yesterday's HTML code for my form in main.py for you already. (You're welcome!) Go take a look! 👉 However, at the moment, the app.route() has no method associated with it, so I need to create a route for this page to receive the data. First, I need a new import: request. Then I create the app.route - I also need to add an extra argument to specify the methods being received. At the moment, that's just 'post', but it does need to be ALL CAPS - POST. Finally I define the process() subroutine that returns request.form 👉 Here's the new code on its own: from Flask import Flask, request app.route('/process', methods=["POST"]) def process():   return request.form 👉 And here it is as part of the whole code: from flask import Flask, request app = Flask(__name__) app.route("/process", methods=["POST"]) def process():   ...
Post a Comment
Read more