GeekTechStuff

Building A Testing Site (HTML, CSS, JavaScript)

I like having this website (www.geektechstuff.com) hosted, but at times I also need a local website for testing whatever I’m looking at at the time (e.g. JavaScript). Previously I’ve just thrown a few lines of HTML down leaving a very sparse looking page that may (or may not) demonstrate the functions I’m looking at but in a very bland way.

Realising that this method a) leaves me with a poor looking testing site and b) is probably costing me more time in the long run (even sparse HTML can take time to rewrite), I decided I had two options. I could either create and copy a HTML template each time or I could design an “offline” (e.g. for my own use) website that actually looks a little bit like a working online website. The second option would allow me to put some of my HTML/CSS skills to use and give me more reasons to write about the various web frontend and backend technologies that are available.

With that in mind I decided to get working on a site that slightly echos the current geektechstuff.com website, i.e. a logo, nav bar at the top, a main feature (e.g. blog post) and three article snippets in the middle and a footer at the bottom. I can then use the “main feature” area of the test site to show off stuff like JavaScript functions.

With the basics design and functionality of the test site complete I can now play with (or test) functionality that I may want to write about in future and produce nicer looking screen grabs for anyone interested in reading my blog posts about web technology. For example, if I was going to write about the location abilities of web pages I would have in the past just outputted the longitude / latitude onto plain HTML but now I can output them into my test site (Note: I’ve blocked out the actual longitude / latitude on the screen grab).

• 
• 

I could then look to go further and adjust earlier projects, e.g. my Python local weather application into Javascript to display on the test website what the local weather is like.

 

  
Home
  
Categories
  
About
  
Contact

Main Feature
Article 1
Article 2
Article 3
Thanks for reading GeekTechStuff.com

body < margin: 0; background-color: rgb(191, 245, 245); width: 100%; >#content < overflow: auto; height: 99%; >.logo < display: block; margin-left: auto; margin-right: auto; >#nav < background-color: rgb(77, 200, 221); margin: 25px; text-align: center; width: 100%; margin-left: auto; margin-right: auto; >#footer < background-color: rgb(77, 200, 221); margin: 25px; text-align: center; width: 100%; margin-left: auto; margin-right: auto; >li < display: inline; padding: 5px; align-items: center; text-align: center; >#feature < background-color: azure; margin: 1%; text-align: center; width: 95%; >#article_1 < background-color: azure; margin: 1%; width: 31%; float: left; word-wrap: break-word; >#article_2 < background-color: azure; margin: 1%; width: 31%; float: left; word-wrap: break-word; >#article_3

function generateText(length) < /* function to generate some text for the articles section of the test geektechstuff website */ var generatedText = ""; var alphabet ="abcdefghijklmnopqrstuwxyz"; for( var i=0; i < length; i++)< generatedText += alphabet.charAt(Math.floor(Math.random()*26)) >return generatedText; > function generateArticle() < /* generates a random article of text from generateText */ var generatedArticle = ""; var amountToGenerate = Math.random() * (300 - 25) + 250; generatedArticle = generateText(amountToGenerate); return generatedArticle; >/* updates article 1, 2 and 3 to show some text */ var pArticle_1 = document.getElementById("p_article_1"); var pArticle_2 = document.getElementById("p_article_2"); var pArticle_3 = document.getElementById("p_article_3"); pArticle_1.innerHTML=generateArticle(); pArticle_2.innerHTML=generateArticle(); pArticle_3.innerHTML=generateArticle();

var mapLocation = document.getElementById("main_feature") navigator.geolocation.getCurrentPosition(success,fail); mapLocation.textContent = "Locating. " // outputs longitude and latitude if location is a success function success(position) < longitude = position.coords.longitude; latitude = position.coords.latitude; longLatMsg = "Longitude: "+longitude+" Latitude: "+latitude; mapLocation.textContent = longLatMsg; >// outputs error message as page content if location fails function fail(msg)

Источник

HTML. Файл для тестов

Создайте новый текстовый файл и вставьте в него следующий код:

Сохраните полученный файл с именем test.html. Файл для тестов готов. Теперь, при двойном клике, test.html будет открываться в браузере по умолчанию:

Тестовая страница
Привет HTML и JavaScript
После этой строки будем писать контент и вставлять тестируемый код

Для проведения экспериментов и редактирования тестового html-файла хорошо подойдет продвинутый, но бесплатный, текстовый редактор Notepad++.

Расшифровка html-элементов

• — объявление, которое указывает, что документ является документом HTML5.
• — корневой элемент html-страницы, между открывающим и закрывающим тегами этого элемента расположен весь html-документ.
• — элемент, который содержит метаинформацию (служебную информацию) о html-документе, которая не отображается на веб-странице.
• — элемент, определяющий заголовок html-документа для поисковых систем, который отображается на вкладке html-страницы в браузере.
• — элемент, являющийся контейнером для всего видимого содержимого веб-страницы.
• — элемент, представляющий контейнер для вводного контента или набора навигационных ссылок.
• — заголовок верхнего (первого) уровня, который обычно используется для отображения основного заголовка веб-страницы.
• — заголовок второго уровня (всего есть шесть уровней заголовков — от до ).

• — элемент, определяющий абзац.

Источник