\documentclass[11pt,a4paper]{amsart} %\documentclass[fontsize=16pt]{scrreprt} \usepackage{amssymb,amsmath,amsthm,boxedminipage,url,graphicx,hyperref} \setlength{\parindent}{0cm} \setlength{\parskip}{1ex} \title{MAS115 Presentation Lab, Week 8} \newenvironment{comment}{\begin{quote}\begin{it}}{\end{it}\end{quote}} \newcounter{qcounter} \newenvironment{questions}{\begin{enumerate}\setcounter{enumi}{\value{qcounter}}}{\setcounter{qcounter}{\value{enumi}}\end{enumerate}} \newcommand{\squarebox}[1]{\fbox{\hbox to 0.8em{\vphantom{$\lambda$}\hfil#1\hfil}}} \theoremstyle{definition} \newtheorem*{question}{Question} \newenvironment{solution}{\begin{proof}[Solution]}{\end{proof}} \begin{document} \maketitle \section{The basics of HTML} Go to the start menu and type ‘Notepad’ into the search box. Start Notepad. \begin{comment} Notepad is the basic text editor that comes with Windows. If it isn’t installed on the computer, instead try Notepad++, which may need installing from the Software Center. \end{comment} In Notepad, type the following and save it in a folder as \url{index.html} (you will need to add the ‘\url{.html}’ bit). \begin{verbatim}

This is index.html.

\end{verbatim} Once you’ve saved your file, go to the folder it is in and open the HTML file called ‘index’. This should open in a web-browser. Return to Notepad, and add the following underneath the \verb++ command. \begin{verbatim}

About index pages

\end{verbatim} Go back to your browser and refresh it (by pressing F5). You should find the page now has a heading. \begin{questions} \item In Notepad, copy and paste the heading and change it to \verb+


+. \item Repeat with \verb+

+ and \verb+

+. (In fact, you can go as far as \verb+

+.) \end{questions} The \verb+


+ tags are used to create headings of decreasing importance. Think of them as similar to the \verb+\section+, \verb+\subsection+ and \verb+\subsubsection+ commands of \LaTeX. \begin{questions} \item Add a new paragraph to your page with the text \begin{verbatim} The index.html page is the first page that a server will find in a web-directory. For that reason, it should be the front page when you create for a website. For more information, see Wikipedia. \end{verbatim} \item Search online for the Wikipedia page that discusses index.html files. Once there, copy the URL. Return to your HTML file, and change `\texttt{see Wikipedia}' to `\verb+see Wikipedia+', pasting in your URL instead of `\ldots'. \item Try changing \verb++ to \verb++. What does this do? \end{questions} Find the Wikipedia page for HTML, and look for the picture of Tim Berners-Lee (one of the creators of HTML). Right-click on the image, and save it as \texttt{bernerslee.jpg} in the same folder as your webpage. Return to your webpage and enter the following. \begin{verbatim}

About HTML

HTML is the language that powers websites. It was developed by Sir Tim Berners-Lee, who invented the world-wide web.

\end{verbatim} Refresh your browser. The image should appear on your page. If not, check your typing carefully, and ask for help if necessary. \begin{questions} \item Add \verb+alt="Sir Tim Berners-Lee"+ to your \verb++ tag, so that it reads \verb!Sir Tim Berners-Lee!. Do you notice any change? What about if you intoduce a typo such as \verb!src="bernerlee.jpg"! in your code? (The `alt' attribute is seen as good practice as it will give information if your image fails to load or if someone is using a screen-reader.) \item Before the \verb++ tag, put \verb+
+ and after it put \verb++, where the dots are filled in with URL for the Wikipedia page for Tim Berners-Lee. \item Make the link you just created open in a new tab. \item The image was taken from Wikipedia: such images have copyright licenses that let you reuse them, but we must add a credit. Put \verb+

(Image by ..., from Wikipedia)

+ underneath the image with the name of the copyright holder/photographer if you can find it. (Hint: Click on the picture within Wikipedia to find who took the photo.) \item Search for a video on Youtube called `What is the World Wide Web?'. Once you've found it, click on `share', then `embed'. Copy and paste the HTML code that appears to the bottom of your webpage. If you can't access this video, try to find something similar from a different site and use that instead. \end{questions} \section{The head of an HTML file} Between the \verb++ and \verb++ commands, add the following title, which will not appear on the page itself but in the tab label in the browser \begin{verbatim} Index pages and HTML \end{verbatim} The \emph{head} of an HTML document --- the bit between the \verb++ and \verb++ tags --- should be thought of as similar to the preamble in a \LaTeX\ document. Here, we set up the look of the page and control things like the title. \subsection{Controlling the look of webpages} So far, we've used HTML in the same way that we started using \LaTeX, letting the computer decide how the final page will look. Very few webpages look this plain. The look of the document is controlled using \emph{Cascading Style Sheets} (CSS for short). We'll cover the basics of CSS next time. For now, download the file at \url{http://mas115.group.shef.ac.uk/docs/week8lab.css}, saving in the same folder as your \texttt{.html} file as \url{week8lab.css}. Now add the following code to the head of your \texttt{.html} file. \begin{verbatim} \end{verbatim} This command tells the browser to format the page according to the style sheet you downloaded. It should have changed the look of the document noticeably. You can view the stylesheet by opening it in Notepad. Play around with it to see what you can alter. You'll need to save the file and refresh the browser each time you make a change. \section{Linking pages} To practice making pages that interlink with each other, create a new file called \texttt{about.html}. Give the page a main heading `About this work', then a paragraph with the text `This work was created for the Week 8 MAS115 computer lab at the University of Sheffield'. \begin{comment} The quickest way to do this will be to copy and paste the code from your index page, and delete the bits you don't need. \end{comment} Make `University of Sheffield' into a link to \url{http://www.shef.ac.uk}. Finally, let's create a menu to navigate between the two pages. At the start of the body, add the following. \begin{verbatim} \end{verbatim} Also copy this to the top of \url{index.html}. This should create a menu at the top of each page. \section{ZIP files} ZIP files are a convenient way to bundle together multiple files, especially if they need emailing. They are useful for websites, which often consist of multiple files all of which are needed for the site to function properly. To ZIP a bunch of files, in Windows you should be able to select the files, right-click then choose `Send to', `Compressed (zipped) folder'. On a Mac, the process is similar, and you should choose `Compress $x$ Items'. Try it with the files from the website you created today. If the above don't work for you, Peazip is free ZIP software that you can use following the instructions below. \begin{questions} \item Start Peazip (install it from the Software Center if necessary). \item In Peazip, go to the folder your website is in and select all the files. \item Click `Add' in the top left-hand corner. \item In the `Output' box, choose a destination and the filename \texttt{MAS115week8}. \item Ensure the options selected are ZIP, Normal and Single Volume. \item Click OK to create one file containing all the files from your website. \end{questions} Note that a website often won't display properly from within a zipped folder: you will need to unzip it again and extract the files to a new folder. \section{Learning from existing sites} One very useful feature of the world-wide web is that the HTML source for any page you visit is viewable. Go to the MAS115 webpage and view the source by right-clicking anywhere on the webpage and choosing `View source'. You could look at some other pages too. You'll often notice lots of complicated code, but the basics of how text and images are displayed are just as we've done so far. \section*{Homework} There is no homework this week! Make sure you finish and submit your miniproject, and pay attention to announcements and lectures as to what happens in the next stage of the project. \end{document} As explained in the lecture, this week's homework is related to the peer assessment of the mini-project. It must be completed before the Week 10 presentation lecture. Next week we will release the projects for marking. Once we have done this, when you log-in the upload system you will see four projects that you must read and comment on as homework. Here are some guidelines. \begin{itemize} \item You might want to print out the PDFs so that you can write on them. Print 2-to-a-page or double-sided to save money and paper. \item You should try running the Python script, by downloading it to your computer (right-click, save-as) then opening in Spyder. You don't need to print this out unless you want to. \item You only need to look at the \LaTeX\ file if you spot a problem, or are interested in how things have been done. \item \textbf{You must leave comments on what was good about the project and what can be improved in the upload system.} \item You don't need to think of a mark yet. You will, as a group, agree on marks and overall comments in the Week 10 lecture. \item Please don't be too harsh on the author. They may not speak English as a first language or may be struggling with computer programming. \item Important: Make a note of your group number and bring your comments with you to the Week 10 lecture. You will discuss the projects in groups in the Week 10 lecture. \item You will receive 2 marks for taking part in the Week 10 peer assessment. To receive these marks you must complete comments online and attend the session. \end{itemize} If you are unsure on what you are supposed to do, please post on the discussion board. Please take this homework seriously! The peer assessment class is very useful when everyone prepares properly.