{"id":34092,"date":"2020-06-23T19:00:33","date_gmt":"2020-06-23T11:00:33","guid":{"rendered":"\/blog\/?p=34092"},"modified":"2020-06-23T22:36:46","modified_gmt":"2020-06-23T14:36:46","slug":"setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m","status":"publish","type":"post","link":"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/","title":{"rendered":"Set up a Raspberry Pi web server and easily build an HTML webpage"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1030\" height=\"579\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/cover-latest-1030x579.png\" alt=\"\" class=\"wp-image-34169\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-1030x579.png 1030w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-300x169.png 300w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-768x432.png 768w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-1024x576.png 1024w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png 1200w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Do you have a <a href=\"https:\/\/www.seeedstudio.com\/Raspberry-Pi-4-Computer-Model-B-4GB-p-4077.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Raspberry Pi (opens in a new tab)\">Raspberry Pi<\/a> and want to run a web server at home? But you might think what to do after running a web server on a Raspberry Pi. In this blog, we will guide you step-by-step to set up a web server at home using a Raspberry Pi within a couple of minutes and will also help you learn about basic HTML coding and ultimately you will have your own website on the internet!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a web server?<\/h2>\n\n\n\n<p>A web server\ncan be simply defined as a computer that runs software and stores files such as\nHTML documents, images, videos, and other necessary files to run a website. A\nweb server is always connected to the internet because websites are accessible to\nthe public at any time. If a web server shuts down, the website associated with\nthat server also shuts down. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How are you able to visit websites through the browser?<\/h2>\n\n\n\n<p>When you\nenter a URL on the browser, this URL is converted to an IP address and the\nbrowser sends this as an HTTP request via the internet until it reaches the web\nserver associated with the requested IP address. When it reached the web\nserver, an HTTP server accepts this request and finds the document which the\nuser has requested. After that, it sends back the requested webpage to the\nbrowser through HTTP.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1030\" height=\"380\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/server-new-1030x380.png\" alt=\"\" class=\"wp-image-34132\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/server-new-1030x380.png 1030w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/server-new-300x111.png 300w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/server-new-768x284.png 768w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/server-new-1024x378.png 1024w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/server-new.png 1500w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advantages of building a web server on a Raspberry Pi<\/h2>\n\n\n\n<p>There are\nseveral advantages of using a Raspberry Pi to build a web server. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Cost-effective\nbecause general hosting costs are expensive<\/li><li>Runs\non very low power and therefore saves electricity <\/li><li>Can\nbe configured as a portable device <\/li><\/ul>\n\n\n\n<p>Also, if you want to host your website on a <a href=\"https:\/\/www.seeedstudio.com\/Raspberry-Pi-4-Computer-Model-B-4GB-p-4077.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Raspberry Pi (opens in a new tab)\">Raspberry Pi<\/a>, you can use any Raspberry Pi of your choosing. Even a Raspberry Pi Zero is able to host a web server!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.seeedstudio.com\/Raspberry-Pi-4-Computer-Model-B-4GB-p-4077.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15909869951.png\" alt=\"\" class=\"wp-image-33219\" width=\"418\" height=\"308\"\/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Building an Apache Web Server on a Raspberry Pi<\/h2>\n\n\n\n<p>There are different types of web servers, but we will be using an Apache web server which is one of the most famous web servers that you can set up on a Raspberry Pi. Apache can deliver HTML files over HTTP and HTTPS protocols and also supports additional modules like PHP where it can deliver dynamic content. But in this tutorial, we will set up Apache to deliver static HTML pages because that is more simple to get started. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Material required<\/h3>\n\n\n\n<p>Setting up an Apache Web Server on a Raspberry Pi is not a complicated process. We will start by listing what you need for this setup:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>1 x <a rel=\"noreferrer noopener\" aria-label=\"Raspberry Pi  (opens in a new tab)\" href=\"https:\/\/www.seeedstudio.com\/Raspberry-Pi-4-Computer-Model-B-4GB-p-4077.html\" target=\"_blank\">Raspberry Pi <\/a><\/li><li>1 x <a rel=\"noreferrer noopener\" aria-label=\"USB Type-C Cable with power adapter  (opens in a new tab)\" href=\"https:\/\/www.seeedstudio.com\/Wall-Adapter-Power-Supply-5VDC-3A-Type-C-p-4103.html\" target=\"_blank\">USB Type-C Cable with power adapter <\/a><\/li><li>1 x <a rel=\"noreferrer noopener\" aria-label=\"Argon ONE Raspberry Pi 4 Aluminum Case (opens in a new tab)\" href=\"https:\/\/www.seeedstudio.com\/Argon-ONE-Raspberry-Pi-4-Case-p-4250.html\" target=\"_blank\">Argon ONE Raspberry Pi 4 Aluminum Case<\/a> (Optional)<\/li><li>1 x <a rel=\"noreferrer noopener\" aria-label=\"Micro-SD card with card reader (opens in a new tab)\" href=\"https:\/\/www.seeedstudio.com\/micro-SD-Card-with-Card-Reader-32GB-Class-10-p-4082.html\" target=\"_blank\">Micro-SD card with card reader<\/a><\/li><\/ul>\n\n\n\n<p>Note that we have used Argon ONE Raspberry Pi 4 Aluminum Case because once you set up an Apache Web Server on your Raspberry Pi, you would leave it running all the time. So, this case can help provide better cooling while the Raspberry Pi gets hot from continuous usage. On the other hand, it\u2019s also a very stylish Aluminum case to use with your Raspberry Pi!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.seeedstudio.com\/Argon-ONE-Raspberry-Pi-4-Case-p-4250.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15925550381.png\" alt=\"\" class=\"wp-image-33987\" width=\"430\" height=\"235\"\/><\/a><figcaption> Argon ONE Raspberry Pi 4 Aluminium Case&nbsp; <\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Configuring the Raspberry Pi for initial boot <\/h3>\n\n\n\n<p>When you buy\na Raspberry Pi, there is no operating system installed on it out of the box. So,\nyou need to burn an operating system into a micro-SD card and then boot the\nRaspberry Pi from that card. <\/p>\n\n\n\n<p><strong>Step 1<\/strong><\/p>\n\n\n\n<p>First, we must download a Linux-based operating system. Raspberry Pi supports various Linux distributions such as Ubuntu, but in this guide, we will use the official OS from the Raspberry Pi Foundation, which is the Raspberry Pi OS. Download it <a href=\"https:\/\/www.raspberrypi.org\/downloads\/raspberry-pi-os\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"here (opens in a new tab)\">here<\/a> by selecting \u201cwith desktop and recommended software\u201d version.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.raspberrypi.org\/downloads\/raspberry-pi-os\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1030\" height=\"906\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15925557811-1030x906.png\" alt=\"\" class=\"wp-image-33989\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925557811-1030x906.png 1030w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925557811-300x264.png 300w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925557811-768x675.png 768w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925557811-1024x900.png 1024w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925557811.png 1077w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Step 2 <\/strong><\/p>\n\n\n\n<p>Then you need to download a software called \u201cbalenaEtcher\u201d which is used to burn the downloaded image above and make the Raspberry Pi boot from the Micro-SD card. Click <a href=\"https:\/\/www.balena.io\/etcher\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"here  (opens in a new tab)\">here <\/a>to download the latest version of this software.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.balena.io\/etcher\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1030\" height=\"460\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15925558981-1030x460.png\" alt=\"\" class=\"wp-image-33990\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925558981-1030x460.png 1030w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925558981-300x134.png 300w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925558981-768x343.png 768w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925558981-1024x457.png 1024w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925558981.png 1486w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Step 3<\/strong><\/p>\n\n\n\n<p>Then connect a micro-SD card into the micro-SD card slot of a PC by using a micro-SD to SD card adapter. You can also use a USB Micro-SD card reader.<\/p>\n\n\n\n<p><strong>Step 4<\/strong><\/p>\n\n\n\n<p>After that open the &#8220;balenaEtcher&#8221; software. Then point to the location of the downloaded image, select the connected micro-SD card, and press \u201cflash\u201d. It will take a few minutes to complete this process.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"600\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15925560971.png\" alt=\"\" class=\"wp-image-33991\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925560971.png 1000w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925560971-300x180.png 300w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925560971-768x461.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p><strong>Step 5<\/strong><\/p>\n\n\n\n<p>Now we will set up Raspberry Pi to automatically connect to the wireless network so that we can communicate with it. <\/p>\n\n\n\n<p class=\"has-background has-very-light-gray-background-color\">However, if you have an HDMI display, a keyboard and a mouse, you can skip this step, connect those into the Raspberry Pi and move onto <strong>\u201c<\/strong> <strong>Installing Apache Web Server<\/strong> <strong>\u201d<\/strong><\/p>\n\n\n\n<p class=\"has-background has-very-light-gray-background-color\">Also if you have a Seeeduino XIAO, you can follow the guide here to setup the communication between Raspberry Pi and PC and move onto <strong>\u201cInstalling Apache Web Server\u201d<\/strong><\/p>\n\n\n\n<p><strong>Step 6<\/strong><\/p>\n\n\n\n<p>Navigate to Raspberry Pi root folder from your PC and create a file called &#8220;wpa_supplicant.conf&#8221;. Then copy the following codes into this file and add your home Wi-Fi username and password into the fields \u201cWiFi-name&#8221; and \u201cWiFi-password&#8221;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>country=US\nctrl_interface=DIR=\/var\/run\/wpa_supplicant GROUP=netdev\nupdate_config=1\n \nnetwork={\nssid=\"WiFi-name\"\npsk=\"WiFi-password\"\nkey_mgmt=WPA-PSK\npriority=1\n}\n<\/code><\/pre>\n\n\n\n<p class=\"has-background has-very-light-gray-background-color\"><strong>Note:<\/strong> <br>The Wi-Fi name and password should be the same as your local Wi-Fi which your PC is connected to (make sure your PC and Raspberry Pi are in the same LAN).<\/p>\n\n\n\n<p><strong>Step 7 <\/strong><\/p>\n\n\n\n<p>Create a\nblank file called \u201cssh\u201d in this directory<\/p>\n\n\n\n<p><strong>Step 8<\/strong><\/p>\n\n\n\n<p>Then eject the micro-SD card from PC and insert it into the Raspberry Pi.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15925567251-1030x682.png\" alt=\"\" class=\"wp-image-33997\" width=\"419\" height=\"277\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925567251-1030x682.png 1030w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925567251-300x199.png 300w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925567251-768x509.png 768w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925567251-1024x678.png 1024w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15925567251.png 1113w\" sizes=\"(max-width: 419px) 100vw, 419px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Step 9<\/strong><\/p>\n\n\n\n<p>Power up the\nRaspberry Pi through a Type-C USB cable and a power adapter<\/p>\n\n\n\n<p><strong>Step 10 <\/strong><\/p>\n\n\n\n<p>Now we will download Putty, which is an SSH client we will use in order to communicate with the Raspberry Pi. Click <a href=\"https:\/\/www.chiark.greenend.org.uk\/~sgtatham\/putty\/latest.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">here <\/a>to download.<\/p>\n\n\n\n<p><strong>Step 11<\/strong><\/p>\n\n\n\n<p>Open Putty\nand set hostname as \u201craspberrypi.local\u201d and port as \u201c22\u201d. Then press \u201cOpen\u201d.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"540\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/new-1.png\" alt=\"\" class=\"wp-image-33996\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/new-1.png 596w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/new-1-300x272.png 300w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><figcaption>Putty Client<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Installing Apache Web Server <\/h2>\n\n\n\n<p><strong>Step 1<\/strong><\/p>\n\n\n\n<p>First of all, make sure to update the package list on your Raspberry Pi by entering the following commands.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo apt-get update\nsudo apt-get upgrade<\/code><\/pre>\n\n\n\n<p><strong>Step 2 <\/strong><\/p>\n\n\n\n<p>Then install\nApache2 package by entering the following command<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo apt install apache2 -y<\/code><\/pre>\n\n\n\n<p>That\u2019s it! Just\ntwo steps and you have an Apache Web Server up and running on your Raspberry Pi!<\/p>\n\n\n\n<p>To confirm\nwhether this web server is running or not, enter the following command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo service apache2 status<\/code><\/pre>\n\n\n\n<p>Now, in order\nto check that Apache is running, you can enter the IP address of your Raspberry\nPi on a web browser and you will be presented with a simple web page as\nfollows. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/dEk9g.png\" alt=\"\" class=\"wp-image-34133\" width=\"572\" height=\"585\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/dEk9g.png 615w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/dEk9g-293x300.png 293w\" sizes=\"(max-width: 572px) 100vw, 572px\" \/><\/figure><\/div>\n\n\n\n<p>However, if\nyou don\u2019t know the IP address of your Raspberry Pi, you can find it by entering\nthe command below in the terminal of your Raspberry Pi.<\/p>\n\n\n\n<p>hostname -I<\/p>\n\n\n\n<p>The server you just set up is only accessible via your home network and its not accessible through the internet. In order to make this server accessible from anywhere, you need to set up port forwarding on your router. However, we don\u2019t plan to discuss this in this blog. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting up HTML page for editing <\/h2>\n\n\n\n<p>The default\nweb page as shown above is just an HTML file on the filesystem of the Raspberry\nPi. We will create our own HTML file and build our own webpage.<\/p>\n\n\n\n<p><strong>Step 1 <\/strong><\/p>\n\n\n\n<p>First, let\u2019s find the location of this HTML file on the Raspberry Pi. Enter the following command in the terminal<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd \/var\/www\/html <\/code><\/pre>\n\n\n\n<p><strong>Step 2<\/strong><\/p>\n\n\n\n<p>Then type the\nfollowing command to list all the files in this directory<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ls -al <\/code><\/pre>\n\n\n\n<p>You will be presented with all the files available in this directory with index.html file being owned by the root user. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"667\" height=\"161\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929051751.png\" alt=\"\" class=\"wp-image-34136\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929051751.png 667w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929051751-300x72.png 300w\" sizes=\"(max-width: 667px) 100vw, 667px\" \/><\/figure><\/div>\n\n\n\n<p>Therefore to edit this file, you need to change its ownership to your own username. Here we will choose the default username of the Raspberry Pi which is \u201cpi\u201d.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo chown pi: index.html<\/code><\/pre>\n\n\n\n<p>Now you are\nable to edit this file and once you save the file after editing, you just need\nto refresh your browser to see the changes.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"665\" height=\"152\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929052041.png\" alt=\"\" class=\"wp-image-34137\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929052041.png 665w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929052041-300x69.png 300w\" sizes=\"(max-width: 665px) 100vw, 665px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Building your first HTML page<\/h2>\n\n\n\n<p>We will now\nfocus on teaching you the basics of HTML.<\/p>\n\n\n\n<p>First of all,\nopen the index.html file by entering the command below and delete all the content\ninside to start with a fresh page.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo nano index.html<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929054071-1030x658.png\" alt=\"\" class=\"wp-image-34138\" width=\"555\" height=\"354\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929054071-1030x658.png 1030w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929054071-300x192.png 300w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929054071-768x491.png 768w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929054071-1024x655.png 1024w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929054071.png 1419w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><figcaption>GNU nano editor<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Tags<\/h2>\n\n\n\n<p>First of all,\nyou need to know about HTML tags which is a basic feature of HTML. Tags are\nused to identify different parts of a web page and also do special formatting\nto the content. <\/p>\n\n\n\n<p>Generally,\nyou put your content within two tags which are opening tag and closing tag and\nthe content inside this tag behave according to what is specified in these tags.\n<\/p>\n\n\n\n<p>For example\n&lt;b&gt; tag can make the text appear bold. Therefore, if you have your content:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>This is my &lt;b>new&lt;\/b> website<\/code><\/pre>\n\n\n\n<p>The word \u201cnew\u201d\nwill be bolded. Note that opening tag has &lt;&gt; and closing tag has &lt;\/&gt;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Basic format of an HTML document<\/h2>\n\n\n\n<p>A general\nHTML document takes the following format<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n   &lt;head>\n\n   &lt;\/head>\n   &lt;body>\n\n   &lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<p><strong>&lt;!DOCTYPE\nhtml&gt;: <\/strong>This tag\nis used to declare that this is an HTML document. You don\u2019t need a closing tag\nfor this.<\/p>\n\n\n\n<p><strong>&lt;html&gt;:\n<\/strong>This tag makes sure\nthat the content inside will have the necessary characteristics of HTML. This\nhas a closing &lt;\/html&gt; tag.<\/p>\n\n\n\n<p><strong>&nbsp;&lt;\/head&gt;: <\/strong>This tag holds information about your\nwebsite, but content inside doesn\u2019t show up once you open it in a web browser.<\/p>\n\n\n\n<p>For example, you can have a meta tag inside your head tag to set the character encoding for your website. This has a closing &lt;\/head&gt; tag.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head>\n   &lt;meta charset=\"utf-8\">\n&lt;\/head><\/code><\/pre>\n\n\n\n<p>Also, you can have a title tag inside the head tag. This tag sets the title of your web page and has a closing &lt;\/title&gt; tag.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head>\n   &lt;meta charset=\"utf-8\">\n   &lt;title> My website &lt;\/title>\n&lt;\/head><\/code><\/pre>\n\n\n\n<p><strong>&lt;body&gt;: <\/strong>This tag holds the main content of the web page. Once you open a web page, everything that you see is normally included within body tags. This has a closing &lt;\/body&gt; tag. Inside this body tag, there can be a ton of other tags, but we will only discuss the most useful ones that you need to set up your first basic web page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Header Tags<\/h2>\n\n\n\n<p>These tags are generally used for titles and subtitles of a page. There are six different header tags corresponding to the size and priority of the titles and subtitles. They range from &lt;h1&gt; to &lt;h6&gt; and the size gradually decrease from h1 to h6. Also this needs a closing &lt;\/h&gt; tag<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body>\n   &lt;h1>Heading&lt;\/h1>\n   &lt;h2>Subheading&lt;\/h2>\n   &lt;h3>Subheading&lt;\/h3>\n   &lt;h4>Subheadinz&lt;\/h4>\n   &lt;h5>Subheading&lt;\/h5>\n   &lt;h6>Subheading&lt;\/h6>\n&lt;\/body><\/code><\/pre>\n\n\n\n<p>You can save the file by pressing Ctrl + X and press Y when prompted in the command like. Then reload the page on the browser to see the changes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929057571.png\" alt=\"\" class=\"wp-image-34141\" width=\"193\" height=\"370\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929057571.png 219w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929057571-156x300.png 156w\" sizes=\"(max-width: 193px) 100vw, 193px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Paragraph Tags<\/h2>\n\n\n\n<p>These tags are used to break the content into different paragraphs. Once you include your content inside &lt;p&gt; tags, the content is put inside a paragraph. Also this needs a closing &lt;\/p&gt; tag.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>This is the first paragraph&lt;\/p>\n&lt;p>This is the second paragraph&lt;\/p>\n&lt;p>This is the third paragraph&lt;\/p><\/code><\/pre>\n\n\n\n<p>Reload the browser\nto see the changes<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929058531.png\" alt=\"\" class=\"wp-image-34142\" width=\"286\" height=\"159\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929058531.png 303w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929058531-300x166.png 300w\" sizes=\"(max-width: 286px) 100vw, 286px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Line Break Tags<\/h2>\n\n\n\n<p>These tags are used to break text into different lines without reserving any space between the two lines. They are considered as an empty element, since there is no closing tag and can\u2019t have any attributes within the tag.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>This sentence will break here &lt;br> and start with a new one<\/code><\/pre>\n\n\n\n<p>Reload the browser\nto see the changes<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929059411.png\" alt=\"\" class=\"wp-image-34143\" width=\"311\" height=\"81\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929059411.png 313w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929059411-300x78.png 300w\" sizes=\"(max-width: 311px) 100vw, 311px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Tags to add styling to your text<\/h2>\n\n\n\n<p>There are some\ntags which are useful to change the outlook of the text.<\/p>\n\n\n\n<p><strong>&lt;b&gt;:<\/strong> This makes text bold <\/p>\n\n\n\n<p><strong>&lt;i&gt;:<\/strong> This makes text italic <\/p>\n\n\n\n<p><strong>&lt;u&gt;:<\/strong> this underlines text <\/p>\n\n\n\n<p><strong>&lt;em&gt;:<\/strong> This tag is used to emphasize something and shows in italics<\/p>\n\n\n\n<p><strong>&lt;strong&gt;:<\/strong> This tag is used to highlight an important text and shows in bold<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>This is &lt;b>bold&lt;\/b> text&lt;br>\nThis is &lt;i>italic&lt;\/i> text&lt;br>\nThis is &lt;u>underlined&lt;\/u> text&lt;br>\nThis is &lt;em>emphasized&lt;\/em> text&lt;br>\nThis is &lt;strong>important&lt;\/strong> text&lt;br><\/code><\/pre>\n\n\n\n<p>Reload the browser\nto see the changes<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"256\" height=\"153\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929060731.png\" alt=\"\" class=\"wp-image-34144\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Horizontal Rule Tag<\/h2>\n\n\n\n<p>These tags are used to create a horizontal like in your web page from left to right. This is a void element and has the &lt;hr&gt; tag.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>This is a sentence \n&lt;hr>\nThis is a separate sentence<\/code><\/pre>\n\n\n\n<p> Reload the browser to see the changes <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"501\" height=\"110\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929061921.png\" alt=\"\" class=\"wp-image-34145\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929061921.png 501w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929061921-300x66.png 300w\" sizes=\"(max-width: 501px) 100vw, 501px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding images to your web page<\/h2>\n\n\n\n<p>You can add\nimages to your web page by using the &lt;img&gt; tag. It is also a void element\nand doesn\u2019t have a closing tag. It takes the following format<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"URL of image location\"><\/code><\/pre>\n\n\n\n<p>For example,\nlet\u2019s add an image of the Seeeduino XIAO<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>This is an image of Seeeduiono XIAO&lt;\/p>\n&lt;img src=\"https:\/\/static-cdn.seeedstudio.com\/media\/catalog\/product\/cache\/9d0ce51a71ce6a79dfa2a98d65a0f0bd\/s\/e\/seeeduino-xiao-preview_1.jpg\"><\/code><\/pre>\n\n\n\n<p>Reload the browser\nto see the changes<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929064511.png\" alt=\"\" class=\"wp-image-34147\" width=\"437\" height=\"375\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929064511.png 922w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929064511-300x258.png 300w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929064511-768x661.png 768w\" sizes=\"(max-width: 437px) 100vw, 437px\" \/><\/figure>\n\n\n\n<p>Also you can download an image and put inside <strong>\/var\/www\/html<\/strong> directory.<\/p>\n\n\n\n<p>Then you can type the following on your index.html file, replacing &#8220;Your Image Name&#8221; with the name of your image following by the image extension.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"Your Image Name\"><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Adding hyperlinks to text<\/h2>\n\n\n\n<p>You can add\nhyperlinks to text by using the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\u201dURL\u201d>text&lt;\/a><\/code><\/pre>\n\n\n\n<p>Example<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Click &lt;a href=\"www.seeedstudio.com\u201d>here&lt;\/a> to check the website of Seeed Studio.<\/code><\/pre>\n\n\n\n<p>Reload the browser\nto see the changes<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"506\" height=\"78\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929066901.png\" alt=\"\" class=\"wp-image-34149\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929066901.png 506w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929066901-300x46.png 300w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a list<\/h2>\n\n\n\n<p>There are\ntwo types of lists that can create in HTML<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Ordered\nList <\/li><li>Unordered\nList<\/li><\/ul>\n\n\n\n<p>Ordered lists are normally numbered lists whereas unordered lists are normally bulleted lists. Ordered lists use the tag &lt;ol&gt; whereas unordered lists use the tag &lt;ul&gt;. Inside the list, you need to put the list items. Each list item has the tag &lt;li&gt;.<\/p>\n\n\n\n<p>Let\u2019s look at an example for an unordered list and an ordered list<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n   &lt;li>red&lt;\/li>\n   &lt;li>blue&lt;\/li>\n   &lt;li>green&lt;\/li>\n   &lt;li>purple&lt;\/li>\n   &lt;li>yellow&lt;\/li>\n&lt;\/ul>\n&lt;ol>\n   &lt;li>red&lt;\/li>\n   &lt;li>blue&lt;\/li>\n   &lt;li>green&lt;\/li>\n   &lt;li>purple&lt;\/li>\n   &lt;li>yellow&lt;\/li>\n&lt;\/ol><\/code><\/pre>\n\n\n\n<p>Reload the browser\nto see the changes<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"188\" height=\"338\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929067921.png\" alt=\"\" class=\"wp-image-34150\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929067921.png 188w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929067921-167x300.png 167w\" sizes=\"(max-width: 188px) 100vw, 188px\" \/><\/figure>\n\n\n\n<p>You can also nest lists to put a list inside a list as follows<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n   &lt;li>red\n\t&lt;ul>\n\t\t&lt;li>dark red&lt;\/li>\n&lt;li>light red&lt;\/li>\n\t&lt;\/ul>\n   &lt;\/li>\n   &lt;li>blue&lt;\/li>\n   &lt;li>green&lt;\/li>\n   &lt;li>purple&lt;\/li>\n   &lt;li>yellow&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<p>Reload the browser\nto see the changes<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929068561.png\" alt=\"\" class=\"wp-image-34151\" width=\"187\" height=\"206\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a table <\/h2>\n\n\n\n<p>We have\ntalked about many important elements of an HTML page and now at last we will\ntalk abut how to create a table in HTML. <\/p>\n\n\n\n<p>To build the\ntable, use the &lt;table&gt; tag. All the content for the table will be inside an\nopening &lt;table&gt; tag and a closing &lt;\/table&gt; tag.<\/p>\n\n\n\n<p>Then we will\nadd the &lt;tr&gt; tag which is the first table row. All the table headers will\nbe included in this first &lt;tr&gt; tag. All table headers need to be listed\nwith a &lt;th&gt; tag.<\/p>\n\n\n\n<p>Then we will\nadd a second &lt;tr&gt; tag to create the second table row and add data for\neach column by using the &lt;td&gt; tag. <\/p>\n\n\n\n<p>Let\u2019s create a simple table using the tags we have learned above.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table>\n   &lt;tr>\n      &lt;th>SKU&lt;\/th>\n      &lt;th>Product Name&lt;\/th>\n      &lt;th>Price&lt;\/th>\n   &lt;\/tr>\n   &lt;tr>\n      &lt;td>102010328&lt;\/td>\n      &lt;td>Seeeduino XIAO&lt;\/td>\n      &lt;td>$4.90&lt;\/td>\n   &lt;\/tr>\n&lt;\/table><\/code><\/pre>\n\n\n\n<p> Reload the browser to see the changes <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"372\" height=\"86\" src=\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2020\/06\/15929075341.png\" alt=\"\" class=\"wp-image-34153\" srcset=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929075341.png 372w, https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/15929075341-300x69.png 300w\" sizes=\"(max-width: 372px) 100vw, 372px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>We believe\nyou leant about how to set up a web server on your Raspberry Pi and also learnt\nabout building a basic HTML web page by reading this blog. We hope this blog\ncould be a start to your web development journey!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Do you have a Raspberry Pi and want to run a web server at<\/p>\n","protected":false},"author":141,"featured_media":34169,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"iawp_total_views":0,"footnotes":""},"categories":[1],"tags":[2955,142,247],"class_list":["post-34092","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-html","tag-open-hardware","tag-raspberry-pi"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Set up a Raspberry Pi web server and easily build an HTML webpage - Latest News from Seeed Studio<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Set up a Raspberry Pi web server and easily build an HTML webpage - Latest News from Seeed Studio\" \/>\n<meta property=\"og:description\" content=\"Introduction Do you have a Raspberry Pi and want to run a web server at\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/\" \/>\n<meta property=\"og:site_name\" content=\"Latest News from Seeed Studio\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-23T11:00:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-23T14:36:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Lakshan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lakshan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/\",\"url\":\"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/\",\"name\":\"Set up a Raspberry Pi web server and easily build an HTML webpage - Latest News from Seeed Studio\",\"isPartOf\":{\"@id\":\"https:\/\/www.seeedstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png\",\"datePublished\":\"2020-06-23T11:00:33+00:00\",\"dateModified\":\"2020-06-23T14:36:46+00:00\",\"author\":{\"@id\":\"https:\/\/www.seeedstudio.com\/blog\/#\/schema\/person\/75eb10f611f7c10a195a98452628bba5\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/#primaryimage\",\"url\":\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png\",\"contentUrl\":\"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png\",\"width\":1200,\"height\":675},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.seeedstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Set up a Raspberry Pi web server and easily build an HTML webpage\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.seeedstudio.com\/blog\/#website\",\"url\":\"https:\/\/www.seeedstudio.com\/blog\/\",\"name\":\"Latest News from Seeed Studio\",\"description\":\"Emerging IoT, AI and Autonomous Applications on the Edge\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.seeedstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.seeedstudio.com\/blog\/#\/schema\/person\/75eb10f611f7c10a195a98452628bba5\",\"name\":\"Lakshan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.seeedstudio.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c1688294d55a746c8c80f4b85eb94989?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c1688294d55a746c8c80f4b85eb94989?s=96&r=g\",\"caption\":\"Lakshan\"},\"url\":\"https:\/\/www.seeedstudio.com\/blog\/author\/lakshan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Set up a Raspberry Pi web server and easily build an HTML webpage - Latest News from Seeed Studio","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/","og_locale":"en_US","og_type":"article","og_title":"Set up a Raspberry Pi web server and easily build an HTML webpage - Latest News from Seeed Studio","og_description":"Introduction Do you have a Raspberry Pi and want to run a web server at","og_url":"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/","og_site_name":"Latest News from Seeed Studio","article_published_time":"2020-06-23T11:00:33+00:00","article_modified_time":"2020-06-23T14:36:46+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png","type":"image\/png"}],"author":"Lakshan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Lakshan","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/","url":"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/","name":"Set up a Raspberry Pi web server and easily build an HTML webpage - Latest News from Seeed Studio","isPartOf":{"@id":"https:\/\/www.seeedstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/#primaryimage"},"image":{"@id":"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/#primaryimage"},"thumbnailUrl":"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png","datePublished":"2020-06-23T11:00:33+00:00","dateModified":"2020-06-23T14:36:46+00:00","author":{"@id":"https:\/\/www.seeedstudio.com\/blog\/#\/schema\/person\/75eb10f611f7c10a195a98452628bba5"},"breadcrumb":{"@id":"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/#primaryimage","url":"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png","contentUrl":"https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png","width":1200,"height":675},{"@type":"BreadcrumbList","@id":"https:\/\/www.seeedstudio.com\/blog\/2020\/06\/23\/setup-a-raspberry-pi-web-server-and-easily-build-an-html-webpage-m\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.seeedstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Set up a Raspberry Pi web server and easily build an HTML webpage"}]},{"@type":"WebSite","@id":"https:\/\/www.seeedstudio.com\/blog\/#website","url":"https:\/\/www.seeedstudio.com\/blog\/","name":"Latest News from Seeed Studio","description":"Emerging IoT, AI and Autonomous Applications on the Edge","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.seeedstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.seeedstudio.com\/blog\/#\/schema\/person\/75eb10f611f7c10a195a98452628bba5","name":"Lakshan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.seeedstudio.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c1688294d55a746c8c80f4b85eb94989?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c1688294d55a746c8c80f4b85eb94989?s=96&r=g","caption":"Lakshan"},"url":"https:\/\/www.seeedstudio.com\/blog\/author\/lakshan\/"}]}},"modified_by":"Lakshan","views":102544,"featured_image_urls":{"full":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png",1200,675,false],"thumbnail":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-80x80.png",80,80,true],"medium":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-300x169.png",300,169,true],"medium_large":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-768x432.png",640,360,true],"large":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-1030x579.png",640,360,true],"1536x1536":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png",1200,675,false],"2048x2048":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png",1200,675,false],"visody_icon":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png",32,18,false],"magazine-7-slider-full":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest.png",1200,675,false],"magazine-7-slider-center":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-936x675.png",936,675,true],"magazine-7-featured":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-1024x576.png",1024,576,true],"magazine-7-medium":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-720x380.png",720,380,true],"magazine-7-medium-square":["https:\/\/www.seeedstudio.com\/blog\/wp-content\/uploads\/2020\/06\/cover-latest-675x450.png",675,450,true]},"author_info":{"display_name":"Lakshan","author_link":"https:\/\/www.seeedstudio.com\/blog\/author\/lakshan\/"},"category_info":"<a href=\"https:\/\/www.seeedstudio.com\/blog\/category\/news\/\" rel=\"category tag\">News<\/a>","tag_info":"News","comment_count":"0","_links":{"self":[{"href":"https:\/\/www.seeedstudio.com\/blog\/wp-json\/wp\/v2\/posts\/34092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.seeedstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.seeedstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.seeedstudio.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.seeedstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=34092"}],"version-history":[{"count":25,"href":"https:\/\/www.seeedstudio.com\/blog\/wp-json\/wp\/v2\/posts\/34092\/revisions"}],"predecessor-version":[{"id":34172,"href":"https:\/\/www.seeedstudio.com\/blog\/wp-json\/wp\/v2\/posts\/34092\/revisions\/34172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.seeedstudio.com\/blog\/wp-json\/wp\/v2\/media\/34169"}],"wp:attachment":[{"href":"https:\/\/www.seeedstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=34092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.seeedstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=34092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.seeedstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=34092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}