Essential Workshop on Web Development Fundamentals
"This workshop outlines the three key pillars of web development: HTML, CSS, and Javascript, providing practical guidance on document structure, common HTML tags, and CSS styling. Participants learn hands-on techniques to create their first webpage and enhance its appearance, gaining valuable skills for showcasing research and projects online."
Uploaded on Oct 06, 2024 | 0 Views
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Showcasing your research on the web John.Hamer@glasgow.ac.uk
Workshop outline The three pillars of the WWW HTML (structure) CSS (appearances) Javascript (dynamics) [ Mechanics: hosting options, domain names ]
HTML <html> <head> <title>My first web page</title> </head> <body> <h1>This is my first web page</h1> </body> </html> Open Notepad++ Type this in exactly as it appears Save as mywebpage.html (NOT .txt) Open the page in a browser
Common HTML tags Paragraph <p>...</p> <img src="..." /> <ul> <li>...</li> ... </ul> <a href="...">...</a> <b>bold</b>, <em>italic</em> Inline image Bullet list Hypertext link E.g. http://html.net
<html> <head> <title>My first web page</title> </head> <body> <h1>This is my first web page</h1> <p>A paragraph</p> <ul> <li>Bullet <em>1</em></li> <li><b>Bullet</b> 2</li> </ul> <a href="http://www.glasgow.ac.uk">Glasgow Uni</a> <img src="http://tinyurl.com/odd7vby" /> </body> </html>
Applies to all <body> elements (i.e. the whole document) Try these fonts, choosing the first one that is available <style type="text/css"> body { font-family: Georgia,Times,serif; font-size: 22px; color: #0033CC; background-color: Gold; } </style> Style attribute Attribute value. px is pixel (screen dot) Web colour code (a dark blue) Standard colour name
CSS style attributes Background image or colour Borders and margins List styles (item markers, number formats) Text justification, size, line height, ... Position static (=normal) relative (offset to normal) fixed (position in window) absolute (position in document)
Style classes You may want to apply different styles to just some HTML elements Mark elements that are to be styled together with a class (i.e. a name of your choice) E.g. <p class="infobox">...</p> Then, set a style for this class: .infobox { color: purple; background-color: #d8da3d } E.g. www.w3.org/Style/Examples/011/firstcss.en.html
Pre-defined CSS templates E.g. https://html5up.net Sophisticated layouts that adapt for desktop, tablet and mobile devices Download https://html5up.net/dimension Unzip the contents Open the index.html file in the browser and in a text editor
Exercise: Customising Dimension After each change, save the index.html file and reload the page in the browser to check the changes come through ok Things to change: In the <title>: replace Dimension by HTML5 UP with your name Change the <h1> title Change the headers and content of the <article> Replace the images folder
Google charts Google have written some code (in javascript ) that can turn your numbers into pictures (charts) Add a link to Google s code in your web page <script type="text/javascript" src="https://www.google.com/jsapi"> </script> Embed your data in your webpage Write a short (javascript) program to select and customise the chart https://developers.google.com/chart
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); Load Google s code Your data Your customisations var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html> Draw a Scatter plot with your data and your options Put the chart here on the web page
D3 http://d3js.org/ E.g. http://prcweb.co.uk/lab/circularheat/
Hosting Need a host computer Permanently available Connected to the Internet Live in huge data centers owned by large companies, notably Amazon (AWS), Microsoft (Azure), Google (Cloud). They make money from large corporate users, and offer free or cheap hosting to individuals Many small companies also re-package their services and offer additional features
Some options Host directly on, e.g., Amazon https://aws.amazon.com/getting-started/ Setup can be a little confusing for novices Easier to use a smaller provider e.g. GitHub, netlify, neocities, https://www.slant.co/topics/2256/~best-static-website- hosting-provider The web address for your site will look something like: some-(random)-name.netlify.com You could settle for that, or
Buy a domain name (now!) You can buy a domain name; e.g. johnhamer.me, for a few per year A domain name points either directly to a dedicated IP address ( A record ) or to another domain name ( CNAME record ) Your web site provider probably won t allocate a dedicated IP address just for you (no worry) Set up your domain CNAME to point to your (random) static web site name If/when you change provider, just update the CNAME
Summary Establishing an enduring web presence starts with securing a domain name (cheap) Decide on a web host Choice between Content management site (e.g. WordPress) Static site (do your own HTML, CSS, JavaScript)
Links www.names.co.uk/domain www.google.co.uk/search?q=static+web+hosting https://www.netlify.com https://neocities.org www.w3schools.com/html www.w3.org/Style/Examples/011/firstcss.en.html www.csszengarden.com developers.google.com/chart
