How to Building your First Raspberry pi Website

A simple HTML page

This project will create a simple Raspberry pi Website with the heading paragraph,  image link and push button.  We will use HTML and CSS to create this website. I will replace the page using HTML and use CSS to determine the page’s style. And these skills will help you build a website.


≡Required components:


For the Raspberry pi Website project, you have to need the following component. 


Raspberry Pi

Now you have to need to set up your project file.


≡How to Project file setup


There is no need to create a circuit to make this project—everything we do on the raspberry pi desktop. Here we will create HTML and CSS files using a text editor. Accessories Text Editor from the desktop environment to access the text editor. Accessories ▸ Text Editor.

For this project, some files will be created to suggest you create a specific folder. Create a new folder in the Projects directory named Web_Applications creates a folder called Project 15.
After opening the text editor, press CTRL + N to create a new file, this file will do all the work and save this file as index.html and style.css, as shown in the figure below.

 

Creating the HTML and CSS files
FIGURE 1: Creating the HTML and CSS files

Web page setup using HTML

HTML, meaning HyperText Markup Language, is commonly used to create web pages. Web browsers designed to read HTML tags tell the browser how web pages will display, which means the browser how to display the content on the page. Let’s take a look at how tags work.

Basic content set up.

The following snippet shows the basic structure of an HTML document. Open your index.html file using Text Editor.

<!DOCTYPE html>
➊ <html>
➋ <head>
  </head>
➌ <body>
  </body>
  </html>

A simple list of the HTML tags in this document shown, the eight <> sign closes the document. Always the first line of an HTML document <! DOCTYPE html> contains. This means the web browser that this document is an HTML file.


At the beginning and end of the webpage, the structure is the <html> </ and </html> tags that indicate the start page and end page of the webpage. Note that a < sign follows the ending tag that means one ends here.


The HTML document has two main parts, one is the head, and the other is the body. The head contains the <head> and </head> tags. The head contains the tags <body> and </body>. Here is the information about the HTML documents. 

They are not visible directly on the webpage, but there is much more to it, including the herring browser app script. The body contains eight <body> </body> s where content for the page such as heading tag image table etc. is added.

Adding heading title paragraph:

To know what your web browser will look like, open a browser, then drag index.html anti and leave it at the top of the browser. In this section, you will learn how to add title headings and paragraphs.

 

Use of title tag:

Put the title you want to use in the <title> </title> tag. This title tag must be in the heading <head> </head> tag shown below.

<head>
<title>Max - The Dog</title>
</head>

NOTE

Instead of dragging the file into the browser again, you can simply refresh the web page after saving the HTML; the changes are updated immediately. 

If you save the file and drag and drop it over the browser, you will see the page with the page title.

Use of heading tags

You can use the headings of the structure on your webpage. Heading tags start with h and followed by a number indicating the heading level. For example, <h1> and </h1> 1 or the top-level heading level; <h2> and </h2> Heading level 2 and Heading level 6 have heading level Heading number 6 What is the lowest level heading. This <body> and </body> tag is used to write headings. Below is an example:

<body>
  <h1>MAX - THE DOG</h1>
  <h2>About Max</h2>
</body>

Use of paragraph tags:

The topics you want to read or want to read should be added to the paragraph. Use the <p> and </p> tags in the paragraph. Below is an example of a paragraph using tape:

 

<h2>About Max</h2>
  <p>Howdy, I'm Max. I'm an aspiring police dog living in Portugal.
I enjoy barking, running, and playing catch. I like meat, bones, and
leftovers.</p>
  <p>My favorite TV series is Inspector Rex.</p>

Now you can see the paragraph you wrote on your web page.
However, if you put all the information correctly, save it to index.html and refresh, you will see a page like an image below:

The information we have given using the tags above is visible but here the web page does not look very nice. Brother, it does not look stylish. If you want to be more beautiful and more stylish, you have to use CSS.

Adding links, images, and buttons:

Including Hyperlinks
The <a> tag is used to connect a page to another pad via the Internet, and it has to be placed between the body <body> and </body> tags. Below is an example:

<a href="https://en.wikipedia.org/wiki/Inspector_Rex">Inspector Rex</a>

A means to anchor, and the text that contains the tag is called the anchor text. Here href is added as an attribute that determines where the link will go. When you see anchor text in your web browser, when you click on that link, the website linked to that link will take you to that website. 

Adding an image:

Images make any website look beautiful. This <img> tag used to add images to a web page, and no tag is used to end this tag because it is an image tag just by inserting this tag in the angle bracket. The image you want to include on your webpage and the webpage you want to include in the webpage must be placed in the same folder. And the name of the image must be included in your web page

<img src="max.jpg">

Src indicates the image’s file location because we have saved the image and the HTML file in the same folder. Here you can add names as per your requirement. Here’s an example of how to add an image size to your image:

<img src="max.jpg" height="350">

Here you can automatically adjust the weight according to the height. Then you can add the height and weight according to your needs. You must include the image <img> tag in the paragraph <p> tag.

Attach button:


You can add buttons to your web page. You need to use the </button> tag to add buttons. Below is an example: How would you use a button switch?

<button>Funny police dog chase</button>

You can create clickable buttons here if you want. When you click the button, you will be taken to a page, and the video will start playing. Below is an example:

<a href="https://youtu.be/znM9YD2J3Cw"><button>Funny police dog chase</button></a>

We have learned to create a web page by adding image links and buttons. Now we will look at the whole HTML code:

<!DOCTYPE html>
  <html>
  <head>
  <title>Max - The Dog</title>
  </head>
  <body>
➊ <header>
➋   <div class="title">
      <h1>MAX - THE DOG</h1>
➌   </div>
➍ </header>
➎ <main>
    <h2>About Max</h2>
    <p>Howdy, I'm Max. I'm an aspiring police dog living in Portugal.
  I enjoy barking, running, and playing catch. I like meat, bones, and
  leftovers.</p>
    <p>My favorite TV series is <a href="https://en.wikipedia.org/
  wiki/Inspector_Rex">Inspector Rex</a>.</p>
    <p><img src="max.jpg" width="350"></p>
    <a href="https://youtu.be/znM9YD2J3Cw"><button>Funny police dog
  chase</button></a>
➏ </main>
  </body>
  </html>

<header> ➊ and </header> ➍ This tag is the first level of money. Here the title of the content is written. <div class = “title”> ➋  and </div> ➌ is defined as a division or class. This glass attribute is the number of an element specified in the title indicator. Here we have used the title, you can use anything you want.

<main> ➎ and </main> ➏ This specifies the mail content of the document. A single HTML document can have many <main> elements. In Figure 5.3 we can see the webpage created with the HTML document.

Max’s web page with a link, an image, and a button
FIGURE 3: Max’s web page with a link, an image, and a button

Use of CSS on web pages:

Now you can add CSS or cascading style sheets, using a style sheet language to describe what the contents of a web page will look like when rendered.


You can add CSS directly to the HTML file or add it to a separate file that you specified in the HTML file. In this chapter, you will create a separate file for the CSS document. As a result, both CSS and HTML files will be easier to understand how they work.

How to embed a style sheet:

Before creating a CSS document, you need to embed a style sheet in the index.html file. So that HTML can refer to any external CSS file. To do this, add the following line between the <head> and </head> tags.

 

<link rel="stylesheet" type="text/css" href="style.css">

The <link> tag indicates the type of HTML file. The REL attribute specifies the nature of the external file. In this case it is a style sheet or CSS file. Which will be used to change the look of the page. The type attribute is set to “text / css” to indicate that you are using a CSS file. The href attribute indicates the location of the file. Again, since the file is in the folder of the website, you only need to specify the name of the file.

 345 total views,  2 views today