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

Web Scraping

 Web Scraping Some websites don't have lovely APIs for us to interface with. If we want data from these pages, we have to use a tecnique called scraping. This means downloading the whole webpage and poking at it until we can find the information we want. You're going to use scraping to get the top ten restaurants near you. Get started 👉 Go to a website like Yelp and search for the top 10 reastaurants in your location. Copy the URL.   url = "https://www.yelp.co.uk/search?find_desc=Restaurants&find_loc=San+Francisco%2C+CA%2C+United+States"   Import libraries 👉 Import your libraries. Beautiful soup is a specialist library for extracting the contents of HTML and helping us parse them. Run the Repl once your imports are sorted because we want the Beautiful Soup library to be installed (it'll run quicker this way). import requests from bs4 import BeautifulSoup url = "https://www.yelp.co.uk/search?find_desc=Restaurants&find_loc=San+Francisco%2C+CA%2C+Unite...
Post a Comment
Read more

It's Called Hashing,Hashing, Printing the Hash , Salty, Second User ,

 It's Called Hashing One of the big issues with storing usernames and passwords in a database is what happens if we're hacked? If those passwords are stored as text, our users' security is compromised. Probably across multiple sites because they ignored our advice and used the same password for everything!!!!! Hashing  In reality, organizations don't store your actual password. They store a hash of your password. A hash is produced by turning your password into a sequence of numbers, then passing it though a hashing algorithm (some mathematical process that is very difficult to reverse engineer). The data spit out of this hashing algorithm is what's stored instead of your actual password. 👉 So let's do it. I'm using the built-in hash function to create a numerical hash of the password  password = "baldy1" password = hash(password) print(password) # This will output a really long number  👉 Now let's store that hashed version in our database in...
Post a Comment
Read more

Hide & Remove,Come Back!,

 Hide & Remove DISCLAIMER: I promise the good stuff is coming back. We have to go through the valley to get to the mountain, right? Sometimes, we want to remove a button, image or piece of text from the screen. To do this, we use pack_forget(). 👉 We'll start with our default tkinter program. import tkinter as tk window = tk.Tk() window.title("Hello World")  window.geometry("300x200")  hello = tk.Label(text = "Hello World")  hello.pack()  button = tk.Button(text = "Click me!")  button.pack() tk.mainloop() 👉 Now I'm going to add a new subroutine to hide the label and call it on a button click. import tkinter as tk window = tk.Tk() window.title("Hello World")  window.geometry("300x200")  # New subroutine def hideLabel():   hello.pack_forget() # Removes the 'hello' label hello = tk.Label(text = "Hello World")  hello.pack()  button = tk.Button(text = "Click me!", command = hideLabel) # Call...
Post a Comment
Read more