Session 2 - How libraries use social media
Social Media and Websites
When you browse the web, you will notice that many websites have social media incorporated into them. The Social Media icons are quickly recognisable and are usually in a reasonably prominent position on the page.Here are just a few examples - and these are the first ones that I came up with - ALL incorporated social media.
Chisholm Institute
Herald Sun
JB HiFi
PetStock
Casey Cardinia Libraries
CLASS ACTIVITY 1
Find 5 Library websites and answer the following:
- Do they incorporate Social Media on their website?
- What tools do they use?
- Was their Social media easy to find on the website?
Choose 1 organisation and tool and find their recent posts
What sorts of things did they post?
Does it show their organisation in a positive light?
Share your findings with the class.
You may complete this task in pairs if you wish.
Assessment 1
Social Media Report - Click here for details. This will also be available on Moodle.Introduction to HTML
Watch the following videoLynda.com: The importance of HTML
What is HTML
HTML stands for HyperText Markup Language and it is the main language used to create web pages. The "tags" are typed into a text editor, which are then interpreted by your web browser and your web page will be displayed accordingly.
The current version of HTML is HTML5 with CSS3. If you would like to find out more about the various versions of HTML and the history of the language, here is a good source http://www.yourhtmlsource.com/starthere/historyofhtml.html
What do you need?
Actually, you need very little to create web pages with HTML. A little bit of know how (or a good tutorial), a text editor and a browser.Text Editor
There are plenty of text editors around. If you have a Windows computer, you will have Notepad for example. You can use any text editor, but generally when coding, it is best to use a text editor that is friendly for coders. Again lots to choose from - just Google free HTML editors and you will get a list. The main difference between a text editor and a HTML editor is that the latter understands about coding and the language and will colour code your document and give you line numbers, which makes it easier to pick up any errors.I am a person of habit and so my standby HTML editor is Notepad++, which you can find here:
https://notepad-plus-plus.org
As the computers at Chisholm are mostly locked down with Windows 10, I recommend installing Notepad++ on to your USB drive.
Step 1: From the Notepad++ Home Page, Click on the big grey button.
Step 2: Select the version that does not include the installer and save it to your USB drive.
Step 3: Once downloaded, double-click to open the Zip file
Step 4: Click on the button that says "Extract All".
Step 5: Browse to select your USB drive to save Zip file to.
Step 6: Once saved, double-click the Notepad++ executable file to load Notepad++
A Browser
Any browser will do - Edge, Mozilla Firefox, Chrome, Safari. I recommend having more than one browser as web pages can be interpreted differently with different browser engines and therefore may display differently. You should always check your final website in multiple browsers and different screen resolutions.Basic HTML Elements
As a bare minimum, a web page MUST have the following basic Tags or elements:<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
The <html> element, will always be at the very start and end of your page.
<head> </head> defines the header area of the page. The <title> tag will always be inside the <head> tag.
<body></body> is used to start and end the content that will be displayed on your page.
You will notice that the elements are contained within angle brackets "< >". The ending tag is preceded by a forward slash "/".
The above code will produce an HTML page with no content. All you will have is a title up the top in the document tab.
Heading
The Heading Element can be used to increase the size of text on your page. Heading sizes will vary from 24 points for a heading 1 to 8 points for a heading 6. (24, 18, 14, 12, 10, 8)
To use the Heading Element use <h1> through to <h6>. These elements will determine the size of the heading. <h1> being the largest and <h6> is the smallest
Exercise 1
Start by opening up Notepad++ and type (or copy paste from blog) in the Basic HTML elements (tags).
Use Save As to save what you have done so far as an HTML file.
Once the file is saved as an HTML file, you will be able to see the colour coding that will help you debug any errors.
Between the <body> and the </body> elements, type in 6 headers using <h1> through to <h6>
<h1>This is a heading 1</h1>
<h2>This is a heading 1</h2>
<h3>This is a heading 1</h3>
<h4>This is a heading 1</h4>
<h5>This is a heading 1</h5>
<h6>This is a heading 1</h6>
Save the file
Click on Run and select Launce in Firefox as the browser to display it in.
This what you should get
Paragraph Element
The <p> is the paragraph element. Paragraphs are automatically spaced with a blank line in between.HTML does not recognise new lines within your text editor as new lines on the web page, and will only recognise one space when interpreting the tag and content. You can only force text to start on a new line with a <p> tag or a <br> tag.
You will also notice, when viewing some code, the <p> tag is almost optional. Blogger, for example, does not use them in its HTML code. Good coding practice is to use them and to always have an opening and closing tag.
Break
A line break tag can be used to start a new line of text without starting a new paragraph. This is one of the exceptions to the rule that elements have a starting and ending tag. As this is not a paired tag, the forward slash is placed at the end of the tag after a space, so the syntax is <br />.Exercise 2
Use the <p> element to add a couple of paragraphs underneath the headings. Save and Launch in Firefox.Use the <br /> element to start some of your text on a new line.
Comments
Post a Comment