The American Cultural Center
IT Class Lesson 1
Introduction to I-clouds
I-Clouds
Definition: I-Clouds are brands that help
you epically get full access to most of your files and apps anytime, and
anywhere you want as soon as you are connected to the internet. They allow you
to manage and share your files (documents, photos, videos, calendars, locations
and even software’s) with friends and family from any device you want.
Furthermore, nowadays I-clouds can help you even find your lost devices.
Sorts of I-Clouds
There are different
sorts of I-Clouds in the internet, have a look at the following:
Google Drive, Onedrive, drop box and box from the left to the right
Quick overview on the most used I-Clouds
Below is a table regarding the strong differences between
the I-Clouds above, check them out
I-Clouds
|
Free Storage
|
File size restrictions
|
Extra
storage
|
OS’s
Limitations
|
Paid
Plans
|
Google Drive
|
15 GB
|
5 TB
|
Yes
|
Windows, mac, android, ios,…(as soon it has Google Chrome-shall work)
|
$2/month 100GB, $10/month for 1TB
|
Onedrive/ or SkyDrive
|
15 GB
|
10 GB
|
Yes
|
Windows, mac, android, ios, windows phone…
|
$2/month for 100GB, $4/month for 200GB,
$7/month for 1TB
|
Drop box
|
2 GB
|
10 GB (with website)
|
Yes
|
Windows, mac, android, ios, windows phone, BB, Kindle…
|
$10/month for 1TB
|
Box
|
10 GB
|
2 MB
|
No
|
Windows, Mac, Android, iOS, Windows Phone, BB
|
$10/month for 100GB
|
Note: The above details
should not be considered for a long term purposes because they are supposed to
individual changes.
Having noticed that most of the class attendants are Gmail
users, we are going to address the first topic of the class (using Microsoft
products) using the Google Drive cloud storage, however we will also peer in on
the Onedrive cloud every now and then to address relevant issues, furthermore,
I encourage all of you to create accounts on both providers “you waste nothing
guys, instead, you will only gather experienceJ”
Getting access to Google Drive
Drive “Google Drive”
Mostly known as
Google drive, this is a tool provided by Google to help their users create,
store and share files with friends and family, (anyone they want and those
people doesn’t need to be Google users). Google initially offers 15 GB free
(just by having an account), however their users can pay for more space if they
want.
Tools offered by Google Drive
Besides creating, organizing and deleting folders the way
you want, Google Drive allows their users to create, share, print, and store
several document formats online, yes “all the Microsoft office package built
online”-reason why we are taking this opportunity remember? You can work on
documents like you use to in in Microsoft office (word, excel, PowerPoint,
Paint and much more). Furthermore, Google Drive also allows you to backup all
of these files, including photos and videos from any device you want, as soon
as it has your email synchronized, it can be a computer, cellphone,… any device
you want.
How to get access to Google Drive
In order for you to get access to Google Drive, you need to
be a Google user in the first place, (you need to have a Google account or an
email account from Google) then follow up the following steps:
i.
In your email/or Google account, look for Drive
in the top ribbon (bellow the link section)
or find Google products
in the small grid square
generally on the right
side besides your profile picture.
ii.
Tap or click on Drive (if you find it in the top
ribbon) and click on the Drive icon in the Google apps.
iii.
Then it will show up like this
This is the Google Drive’s main page.
IT Class Lesson 2
Introduction to Microsoft office word built on the Google online cloud
Introduction to Microsoft office word built on the Google online cloud
ii.
On the following page, you will see a page like
this
See the
cursor and in the left side of the picture above, there is where you are going
to start writing your document and the ribbons and tabs above it are to
help you organize your document so that it can look good or much professional.
There are many other epic ways to get access to the word version of
office in Google Drive, however this is the easiest one. But I promise to go
over these other methods in class wright guys.
So
having reached at these point, you can now start writing your document. Following
on are couple great hints and shortcuts you guys can use while typing on Google
docs.
Meaning and importance of Google docs tabs
Menu/or
docs home: Allows you to choose between several templates the one that fits
your needs, you can find templates on (Blank, Resumes, Letters, Reports, emails,…and
much more) as well as your recent documents.
File tab: Allows you to create new
documents, switch to other templates, make copies of the document, delete,
select proofreading language, and convert docs, and a lot more.
Edit tab: lets you undo, redo, copy,
cut, paste, select, select all, find and replace- a great tool … and much more.
View tab: to help you print your
layout, use rulers, suggestions as you type and much more, we will go over
these options in class.
Insert tab: to help you insert
pictures, equations, drawings, links, notes, number pages...
IT Class Lesson 3:
Working with Google docs
There are several
commands we need to apply in order to organize a document depending on the kind
of document we are working on, from the layout, structure, organization,
design, attachments, to the subject of the document itself. In this lesson you
will learn how to use this commands and their importance when writing a
document.
As we saw last week,
MS Office, Google docs and SkyDrive already provide you a lot of different
templates to help you write different documents, these are standard features provided
by them to make our lives easier guys, so you should always have a quick look
at these templates before you start typing your documents so that you may get
to know how far you are from the standards. Then with the help of the following
features I’m providing bellow, you can make even stronger documents.
As from the Google
doc’s main page you may see from the left to the right, these are the “undo and redo options” they let you delete
(undo) or replace (redo) recent
changes made in the document (they might be a word, sentence, paragraph or even
more). The shortcuts to get access to these controls are (Ctrl+z for undo and
Ctrl+Y for redo).
The Bold function which allows you to
highlight a specific sentence or word according to your needs, they help you
making titles, subtitles and much more, and you can use the (Ctrl+B) keys to
activate or deactivate it.
The italic function this feature allows you to
italicize your text or to bend selected words or sentences to an inclination
within the first quadrant. I encourage you to use this feature when you type
words of a different language compared to the main you are using to type your
document. Shortcut (Ctrl+I).
The underline function allows you to underline a text you have
selected somewhere within the document, it’s great to use it for emails,
Headings, titles, links and a lot more. (Ctrl+U).
The alignment
functions lets you chose where in the
document to start writing, it can be in the left, center, right, or justify
(Ctrl+l, Ctrl+E, Ctrl+R, Ctrl+J). I encourage you to go for justify when typing
formal documents.
Acompanhe as primeiras aulas do curso online de Mandarim, espero que goste. E nao se esqueca de partilhar com seus proximos.
Acompanhe a Primeira parte da primeira aula do nosso curso.
Segunda parte da aula 1 do curso de Chinês.
Introduction
to Google Spreadsheets
Google sheets is
another amazing Google feature that allows you to create, organize and analyse different sorts of DATA
using spreedsheets, it is basically the
Microsoft office excel package built online or on the Google platform. In this
lesson you will learn how to get access as well as the different ways you can
use Google sheets in your daily lives let’s get it started.
As from the beginning, like we did with
Google docs, for you to get access to Google sheets, you need first to get
access to your Gmail account, then
your Drive and when already there,
in order to get access to Google sheets you must click on the new option then select Google sheets or spreedsheet, and a new window will be opened in your browser (your Google Sheets doc) just like this:
A great hint is that
you correctly save your document in the first place, by typing it’s name in the
top left corner (replacing the word-unsaved
spreadsheet) then you will be ready to go, have a look:
Getting
to know Google Sheet’s elements
Like the physical version of office, Google
sheets has the exact same elements and a couple more options, this means,
Google sheets does the exact same things the physical version does and even
more, let’s have a general look at the elements among a Google Sheet:
Around the top of the
document, wright bellow the name you have given it, we have the formatting bar a collection of tabs to
help you get access to different kinds of features to use while working on your
document, from basic word typing sets to graphs, design and a lot more we will
have a look at in class.
Besides
that, we have also the Formuka bar,
a thin row besides the fx
that shows every formula added in any cell, or a place on which we can add,
edit as well as find new formulas to use in our sheet.
Lastly we have the spreadsheet layout, which is the table or grid that takes most of
the space over the document, here is where you can add your data as well as
make all calculations and graphs you want, the small grids or rectangles within
this layout are called Cells, don’t
worry about their sizes guys, you can always increase or decrease them anytime
you want and I will show you some of the procedures you can take in class.
Now that you know the basic elements of a
Google Sheet document, lets go over basic rules you need to know when working
with Google Sheets.
I.
In order for you to make any calculation
or operation in Google spreadsheets, you must always start with an = (equal sign) You will notice in class
guys that Google spreadsheet is very “smart” however, in order for it to use
it’s kindness, you need to make it feel that need J
I will show you that. So make you have typed an equal sign before any
calculation or before adding any in Google sheets;
II.
Angular parenthesis are also a great
feature to use when working with long formulas, they allow users to remember
and fix in mind those old math concepts, yes Google sheets can help become a
organized math geek J;
III.
Signs like colons (:), semi-colons(;), dots
(.) “stars”(*) slashes(/) are also an important part of Google sheets
and they play very important roles when doing calculations, we will try them in
class but have a look at the following tables for a breath idea:
Signal
|
Function
|
Signal
|
Function
|
+
|
Addition
|
>
|
More/plus
than
|
-
|
Subtraction
|
<
|
Less
than
|
*
|
Multiplication
|
<
>
|
Different
from
|
/
|
Division
|
>=
|
More
and equal
|
.
|
Decimals
|
<=
|
Less
and equal
|
:
|
Range
|
||
;
|
Then
do X/Y/Z
|
It is good to know that most of the above
commands can be entered in words as well, you just need to write their names in
the cells or in the formula bar, I will show you that in class.(Typing words in
cells, entering conditions,…)
Introduction to Html and
Css
Overview
The internet is a
worldwide “network of networks” where computers connected to government,
educational, corporate networks and many others are joined by individual
computer users accessing the internet through an ISP (internet service
protocol) or online service, like you do when you open a Google page, your
Facebook page or any other online. All of these pages that seem to be unique,
different, exciting and strong sources of information have got the same
background, they all contain the same characters, though set in different ways.
In this course you will learn the concepts of “html”, how they play a role in
the creation of websites as well as create yours using notepad and notepad++.
Internet access and html
Before we get started on
creating websites, it's very important that we understand some basic networking
concepts. For instance, what is networking and when do we say we have a
computer network anyway?
Networking
Is………And we can only say that we
have a computer network when two or more computers are connected to each other
in a way that they may share information, (send and receive information to and
from each other) through wire, microwaves, satellites and many other resources.
So the internet is considered a worldwide “network of
networks” because it allows not only computers to connect to each other but a
network of computers to connect and share information to each other. Then how
to we connect computers, or how do we make a computer network?
Internet Protocol (IP): An Internet protocol is the address that
uniquely identifies each computer and can be assigned permanently or
temporarily to it on the internet, it is the address that allows all computers
to work as senders and receivers of information. Each computer connected that
is connected to the internet, whether a part of a large network on a university
campus or someone’s home office, uses a temporary or permanent internet
protocol to send and receive information.
Then how do we send and receive information through the
internet? How do we get access to internet??
Internet Service Provider (ISP): it is an
organization that offers you internet access, and it can be via modem, cable,
ISDN, DSL or any other method that gives individual users or small
organizations access to the internet.
How do users view the information they are sending or
receiving through the internet?
Web Browser: A web browser is a software that allows users to view information and
several other documents on the internet through web pages. (Egg. Chrome, Torch,
Mozilla, Safari, and more).
Where do we find the information we seek and where to we
store the information we share?
Web Server: Stored in a computer, a
web server is a specialised software used to store html files (websites) and
send them to users when they request. A web server can contain folders or
directories, much like your own computer, as a matter of fact many web servers
are simply desktop computers that are running special web serving software’s
and have full-time connection to the internet.
How do users access documents, files or information in a
web server?
Uniform Resource locator (URL): it is an internet address that contains the resource
type (“http” for a webpage or “ftp” for a file transfer site, …) the domain
name and other information to locate the correct internet resource. So the
viewer or user accesses the document or information by typing a URL into their
web browsers, it can generally appear similar to: http://www.google.com
HTML
& CSS
Now that we understand what a computer network is,
and how different sorts of information are transferred from a webserver to a
normal computer, it's time to see how web pages are created using HTML and CSS
as the main goal of these course.
HTML or
simply “HyperText Mark-up Language” is the underlying language of the vast
majority of pages on the web, it is used to create webpages. Hypertext is the ability to create
links to other websites and web resources; Mark-up
(tags) is the ability to create pages and formatted text along with images
videos and other resources all in the same page, or even better, it is the code
in an HTML document that indicates how page elements should be displayed in a
browser’s window. Generally HTML contains a set of tags that are used to
indicate how text, images and other external files should be displayed by a
browser as well as how it should interact with a page.
CSS (Cascading
Style Sheets): is a presentation language created to give content style and
appearance to an HTML page. In a sense, HTML determines the structure and
meaning of content on a web page while CSS determines the style and appearance
of the same content.
Tools we will use
All you need to create any HTML page is a text editor
such as notepad to write the code and a web browser to view the page.
Important:
A word processor is not a text editor, that means that you can't use a
software such as “MS Word” to create html pages right?!
Creating
your first Website
1. Open a text editor and type the following code:
<!DOCTYPE
html>
<html>
<head>
<title>My
first website</title>
</head>
<body>
<p>
I have successfully created my first webpage</p>
</body>
</html>
2.
Now
save it on your desktop as “name.html”
without the double quotation marks. Go to your Desktop, open the file you have
just created with one of the browsers suggested above and see the results. You
should see a page that says “I have successfully created my first webpage”.
Now let’s try to understand what you have just done:
Everything that goes inside this < > signs
is called an element. Elements are designators that define objects within a
page, including structure and content.
Elements are
often made of multiple sets of tags, identified as opening and closing tags. Opening
tags mark the beginning of an element, such as <head>. Closing
tags mark the end of an element and begin with a forward slash, such as </head>.
<!DOCTYPE
html>
This is the very first
thing that goes into a html document, this is not an html tag, it just tells
the browser the version of html that the page was written in, yes html has
different versions but this is something that we will see later on the course.
An HTML document starts
and ends with <html> and </html> tags. These tags tell the browser
that the entire document is composed in HTML. Inside these two tags, the
document is split into two sections:
<head>
<title>First
website</title>
</head>
The <head> element contains all the head
elements for example the <title> and </title> tags. They tell the
web browser that the title of this page is whatever goes inside the
<title></title> tags. In this case it’s “My first Website”.
<body>
<p>
I have successfully created my first webpage</p>
</body>
The <body> </body> elements contain all
the body elements for example the <p> </p> tags they tell the web
browser to create a paragraph that displays whatever is inside the
<p></p> tags. In this case it’s “I have successfully created my
first Webpage”.
or
HTML Basic Tags
The basic structure for all HTML documents is
simple and should include the following minimum elements or tags:
<html> - Which is the main
container for HTML pages
<head> - Is the container for
page header information
<title> - The title of the page
<body> - The main body of the
page
Homework
Q: Define HTTP and HTML. What is the difference
between the two?
Q: What is a Web server?
Q: What is CSS? How does it differ from HTML?
Q: What is an element?
Q: Create a webpage that contains a text with at
least five paragraphs or more.
Resources:
Homework Correction
Q1: Define HTTP and HTML. What is the difference between
the two?
HTTP: Standing for “Hypertext Transfer
Protocol”, HTTP is the code in a web address (URL) that specifies that you are
looking for a common web site, it tells the web browser to go onto the web
server and ask for information’s related to the code or words coming in front
of it. Generally, this protocol establishes the standard that computers on the
Internet use to communicate and transfer data through web browsers.
HTML: Standing for “Hypertext Mark-up
Language” HTML is a “mark-up language” used for structuring and presenting
content in a web browser. It is what defines what will appear in your browser.
Q2: What is a Web server?
A web server is basically a special computer
software that stores HTML documents (websites, files and content) and delivers them
to users when they request from any computer.
Q3: What is CSS? How does it differ from HTML?
Standing for “Cascading Style Sheets”, it's a
presentation language created to give content style and appearance to any HTML
page. And It differs from HTML for the fact that Html creates and structures
the content presented in a web browser when it gives style and appearance to
the same content.
Q4: What is an element?
In Web Design elements
are everything that comes within tags (opening and closing tags). However, HTML
elements can be nested, in a sense you may many times find (elements inside
elements), then you can say that HTML consists of nested HTML elementsJ.
Q5: Create a webpage that contains a text with at least
five paragraphs or more.
Code
|
Webpage
|
<!DOCTYPE>
<head>
<title>Homework correction</title>
</head>
<body>
<p>I am paragraph
1</p>
<p>I am paragraph
2</p>
<p>I am paragraph
3</p>
<p>I am paragraph
4</p>
<p>I am paragraph
5</p>
<p>I am paragraph
6</p>
</body>
|
|
Adding headings, paragraphs and lists
Now that you know how to define the type of a webpage as
well as creating the main parts of it (head and body), it's time to start
learning how to create headings, paragraphs and lists. But before we start
talking about headings and lists, have a look at the code in the previous page,
and you will see that we did not add the html element both the defining
tag and before the body, but the page worked the same way. Most web browsers
will render the code even without the html element specified, but it's always a
good practice adding it when creating a web page right?J
Headings
Very often you might need to add
some headings or one of those huge titles at the top of your webpage, and
that’s good by the way. Then in this section, you will learn how to do that
using the heading elements (<h>
</h>).
There are six different heading
elements in the example bellow, (h1, h2, h3, h4, h5, and h6) (h6 is the
smallest and h1 obviously-the highest). Heading elements work just like most of
the other elements in html, you have to add the respective opening and closing
tags (<h> </h>) and
between them text.
Example: Open your text editor and type in the following
code and save it as (Headings.html) and open it with your web browser.
Code
|
Webpage in browser
|
<DOCTYPE html>
<html>
<head>
<title>Adding
Headings</title>
</head>
<body>
<h1> I'm the h1 heading. I'm the highest
</h1>
<h2> I'm the h2 heading</h2>
<h3> I'm the h3 heading</h3>
<h4> I'm the h4 heading</h4>
<h5> I'm the h5 heading</h5>
<h6> I'm the h6 heading. And I'm the
smallest</h6>
</body>
</html>
|
|
<<
This is how it should look like in the browser.
Lists
Creating
lists in your browser can be very helpful for many different reasons. For
instance, let’s say you want to make a list with names of people “your friends”
or with the prices of some products etc. Lists are also used to create menus
for a website with links to other pages we will see this next Tuesday I believe.
There are two main types of lists:
o Ordered
lists and
o Unordered
lists,
So you have to specify exactly which one of those you
want to use everytime you wish to create any in your webpage.
An unordered list starts with the
<ul> tag and each list item starts with the <li> tag. The list
items are marked with bullets (typically small black balls).
Example 2: In your text editor and type the following code
Code
|
This is how it should
look like in the browser
|
<!DOCTYPE>
<html>
<head>
<title>Creating
lists</title>
</head>
<body>
<ul>
<li>
Frisbee</li>
<li>
Swimming</li>
<li>
List item 3</li>
<li> List item
4</li>
<li>
List item 5</li>
</ul>
</body>
</html>
|
|
An ordered list
starts with the <ol> tag. Just like an unordered lists list item starts
with the <li> tag, but the list items are marked with numbers.
Example 2: Type
the following code in your text editor and open it with your favourite browser
Code
|
This is how it should
look like in the browser
|
<DOCTYPE html>
<html>
<head>
<title>Creating
ordered lists</title>
</head>
<body>
<ol>
<li>
Potatoes</li>
<li>
Apples</li>
<li>
Bananas</li>
<li>
list item 4</li>
<li>
list item 5</li>
</ol>
</body>
</html>
|
 |
Module 2 test
Q: Now you know how to create paragraphs, headings and
lists in html. Create a web page that displays a text that includes lists,
paragraphs and headings, it can be about anything you want, for example it can
be a cooking recipe.
Resources:
Extended study
Create a
website in notepad or notepad++ (I will provide you today) with all the tags
you have learnt how to use by now (heading, paragraph, and any of the two lists
we learnt how to create today and send the notepad file with the code to me by
email.
Homework Correction
Create a
website in notepad or notepad++ (I will provide you today) with all the tags
you have learnt how to use by now (heading, paragraph, and any of the two lists
we learnt how to create today and send the notepad file with the code to me by
email.
Code
|
Webpage
|
<!DOCTYPE html>
<html>
<head>
<title>Homework
Correction</title>
</head>
<body>
<h1>What is
html?</h1>
<P1>Standing for
Hypertext Mark-up Language HTML is a “mark-up language” used for structuring
and presenting content in a web browser. It is what defines what will appear
in your browser. </p1>
<h2>What is CSS? How
does it differ from HTML?</h2>
<p2>Standing for
“Cascading Style Sheets”, it's a presentation language created to give
content style and appearance to any HTML page. And It differs from HTML for
the fact that Html creates and structures the content presented in a web
browser when it gives style and appearance to the same content.</p2>
<h3>HTML
tags</h3>
<p3> Find bellow a list
of tags we already know how to use</p3>
<ol> head</ol>
<ol>body</ol>
<ol> Heading</ol>
<ol>Paragraph</ol>
<ol>and listing
tags</ol></p3>
<h3>My Favorite html
tags</h3>
<p4> Find bellow, a
list of my favorite tags
<ol><li>body</li>
<li> Heading</li>
<li>Paragraph</li>
</ol></p4>
<h4> My friend's
favorite tags</h4>
<p5> Now find a list of
my friends favourite tags</p5>
<ul><li>paragraph</li>
<li>heading</li>
<li>head</li>
</ul>
</body>
</html>
|
|
Adding photographs, Videos and links
Nowadays images and videos are what calls more people’s
attention, many internet users enjoy more watching and sharing content than
reading, then if you would like to constantly grab their “online tours”, make
them and their friends addicted to your webpage, you should start thinking on
adding this kind of content to your website. So, in this lesson, you will learn
how to add images, videos and links to a webpage. But before we start working
on that, have a look at the code in the previous page, and you will see that
the first list’s order bellow the html tags heading is different from the ones
we learnt last week. This is because I
did not specify the elements of the list, - I simply stated every list element
as ordered list, it’s like they are a sequence of ordered lists themselves
rather than list elements inside an ordered list (the list elements are within <ol> </ol> tags rather than
<li></li>)J.
Adding
images
The <img> tag
is the one that allows you to add images in HTML. It is a self-closing tag, what
means, you won't have to add any closing tag like (</img>) for example. No, you only need to write
one tag and add the special closing tag which is the forward slash at the end
of everything, like this: (/>).
However, that’s not all, to add an image you'll also have to state the path, (the
location) of the image you intend to display in your webpage, what is made
possible thanks the source tag (src=”path.format”).
Example: Open
your text editor and type a similar code:
Code
|
Webpage in browser
|
<DOCTYPE html>
<html>
<head>
<title>Adding
images</title>
</head>
<body><h1>
My Favourite image in my website</h1>
<img
src="Tech tuesdays.jpg" width="500"
|| height="600"/>
<p> Sounds good?</p>
</body>
</html>
|
|
Procedure:
After the image introductory tag, typed the source tag (src=") then the location of the picture you want to be
displayed in your website (E:\Personal\Courses\IT-Course Acc\Web pages)
followed by its name (Tech Tuesdays)
extension (.jpg), and the size you
want it to appear in the page (width="500"height="600") then
the special closing tag (/>).
Shortcuts: If the picture you intend to add to your webpage is
in the same folder with the HTML document, you don’t need to type in the
location of it, simply state the name.Extension/file
type and it will be displayed the same way, just like I did aboveJ.
You can quickly find the location of your
picture in different ways: 1st
find it by right clicking the picture itself then select properties and
simply copy the location Check the
location of my picture highlighted in blue on the image below). ( 2nd, on your computer,
navigate to the location (folder) your picture is stored, then right click on
the path section and simply select copy address as text and then paste it in your
html document. See the picture bellow:
Path of the image from its folder’s ribbon.Path of the picture from the properties.
Adding
audios
Another content that can make you grab internet users
attention are audios, yes, let’s get to know how to add audios into your
webpage.
Steps:
To be able to add and use audios in your website you will
have to learn couple more interesting tags, starting with the javascript, represented by <script> </script> tags,
this code allows users to manage the audio you will display (play, pause,
volume etc) let’s say it provides users the controllers they need to use the
audio.
Another interesting tag you will attach to the javascript
one is the <audio id> </audio id>
tag. We use it to specify the path of the audio we want to display. It’s important to specify the id because it
helps the javascript to identify the audio in your code.
The paragraph at the end is just an alternate text that
is displayed whenever your browser is unable to play the file.
Homework Correction
Create
a webpage about yourself or anything you want as soon as it displays a picture,
a list of things you like to do, your favorite music/music’s and links you like
to access then bring the file in a share drive or send it to me by email. And
remember guys, practice and experience is what will make you successful web
designers.
Code
|
Website
|
<DOCTYPE html>
<html>
<head>
<title>Homework
Correction</title>
</head>
<body><h1>
About me</h1>
<p>Picture</p>
<img
src="Tech tuesdays.jpg" width="100"
|| height="200"/>
<h2>My Favourite food</h2>
<ul>
<li>
Potatoes</li>
<li>
Chicken</li>
<li> Apples</li>
<li>
Oranges</li>
<li>
Bananas</li>
</ul>
<h3> My Favourite music
colection</h3>
<script>var audio;function init() {audio =
document.getElementById('audio1');} function play() { audio.play(); }
function pause() { audio.pause(); }function rewind() { audio.currentTime = 0;
} window.onload = init; </script>
<audio id="Calvin Harris Vs Hardwell Vs Tiesto 2015 Dance
Music Mix - YouTube[via torchbrowser.com] - Copy" controls><source
src="Calvin Harris Vs Hardwell Vs Tiesto 2015 Dance Music Mix -
YouTube[via torchbrowser.com] - Copy.aac" type="audio/mpeg"
/> <p> Try it online
</p> </audio>
<script></script>
<h4>Links
I access very often</h4>
<p>Paragraph
1 with a <a href="https://www.google.com/" > Google </a> redirecting to Google</p>
<p><a
href="https://www.facebook.com/Edsnaguiar">Facebook</a></p>
<p> Would you like to know more?</p>
</body>
</html>
|
|
Adding links
Links are another important tags to be used nowadays,
they make switching between websites an amazing thing, let’s learn how to add
links to our websites.
To do it you'll now learn a new tag
used to create links, the <a>
tag.
Code
for a simple link: <a href="url">Link text</a>
In which url is the page
or web resource that you want to redirect the user to when he/she clicks on it.
Example:
Create a code similar to one bellow and add as many
hyperlinks you want then open them in your browser just like I did bellow.
Code
|
Website
|
<DOCTYPE html>
<html>
<head>
<title>Adding
Hyperlinks</title>
</head>
<body>
<h1>Hyperlinks</h1>
<p><a
href="https://www.google.com/"
> link </a> redirecting you to Google</p>
<p><a
href="http://www.edx.org">Click here</a></p>
<p><a
href="http://progectoscaseiros.blogspot.com/</p>
</body>
</html>
|
 |
Adding Videos
Adding videos can be another great
experience for your website users, many people spend thousand hours watching
music and movies online, so lets get to know how to add viedos and movies to
our webpage.
Steps:
The first thing you have to do is to add the video and control tags (
<video> & controls) then the source ones you already know how they
work then the type of the video (3gp, mp4/…)
ExampleL: Copy and paste the code bellow to your text
editor and open it in your webrowser.
Code
|
Website
|
<DOCTYPE html>
<html>
<head>
<title>My
video in my webpage</title>
</head>
<body><h1>
How is it like </h1>
<p>Play
the video bellow</p>
<video
controls > <source src="Video.mp4"
type="video/mp4"></source>
</video>
</body>
</html>
|
|
Background, color,
text formatting and table tags
Find bellow a table with the common
tags used to control all the above details in html or a website.
Extended study
Create a webpage about anything you want and make
sure you use all the tags in the table above then bring the text editor’s file
in a share drive on Tuesday. And remember guys, practice and experience is what will
make you successful web designers.
Homework Correction
Create a webpage about anything you want and
make sure you use all the tags in the table above then bring the text editor’s
file in a share drive on Tuesday. And remember guys, practice and experience is
what will make you successful web designers.
Code
|
Website
|
<DOCTYPE html>
<html>
<head>
<title>Homework
Correction</title>
</head>
<body><h1>
About me</h1>
<p>Picture</p>
<img
src="Tech tuesdays.jpg" width="100"
|| height="200"/>
<h2>My Favourite food</h2>
<ul>
<li>
Potatoes</li>
<li>
Chicken</li>
<li> Apples</li>
<li>
Oranges</li>
<li>
Bananas</li>
</ul>
<h3> My Favourite music
colection</h3>
<script>var audio;function init() {audio =
document.getElementById('audio1');} function play() { audio.play(); }
function pause() { audio.pause(); }function rewind() { audio.currentTime = 0;
} window.onload = init; </script>
<audio id="Calvin Harris Vs Hardwell Vs Tiesto 2015 Dance
Music Mix - YouTube[via torchbrowser.com] - Copy" controls><source
src="Calvin Harris Vs Hardwell Vs Tiesto 2015 Dance Music Mix -
YouTube[via torchbrowser.com] - Copy.aac" type="audio/mpeg"
/> <p> Try it online
</p> </audio>
<script></script>
<h1> How is it like in this format we
learnt last week </h1>
<p>Play
audio bellow</p>
<video
controls > <source src="Calvin Harris Vs Hardwell Vs Tiesto 2015
Dance Music Mix - YouTube[via torchbrowser.com] - Copy.aac"
type="audio/mpeg"></source> </video>
<h1>
How is it like </h1>
<p>
<b>Play</b> the <b>video</b> bellow</p>
<video
controls > <source src="Video.mp4"
type="video/mp4"></source>
</video>
<h1>What
is html?</h1>
<P1>Standing
for <em>Hypertext Mark-up Language HTML</em> is a “mark-up
language” used for structuring and presenting content in a web browser. It is
what defines what will appear in your browser. </p1>
<h2>What
is CSS? <i>How does it differ from HTML?</i></h2>
<p2>Standing
for <small>“Cascading Style Sheets”</small>, <strong>it's a
presentation language</strong> created to give <sub>content style
and appearance</sub> to any HTML page. And It differs from HTML for the
fact that Html creates and structures the content presented in a web browser
when it gives style and appearance to the same content.</p2>
<h3>HTML
tags</h3>
<p3>
<up>Find bellow a list of tags</up> we already <ins>know
how</ins> to... <del>use</del></p3>
<ol>
head</ol>
<ol>body</ol>
<ol>
Heading</ol>
<ol>Paragraph</ol>
<ol>and
listing tags</ol>
</p3>
<h4><mark>Links
I access very often</mark></h4>
<p>Paragraph
1 with a <a href="https://www.google.com/" > Google </a> redirecting to
Google</p>
<p><a
href="https://www.facebook.com/Edsnaguiar">Facebook</a></p>
<p> Would you like to know more?</p>
</body>
</html>
|
|
Hands on the new Platform
Little web hut is great resource we will use during our
following lessons, it is a website that contain strong and useful information
about creating and editing webpages online, and the good thing about it is that
it is based on real time practice, so go to your web browser and access the
link www.littlewebhut.com and you will be able to practice everything we
have seen by now.
Introduction to CSS
Like we have seen guys, CSS, Standing for
Hypertext Mark-up Language HTML is a “mark-up language” used for structuring
and presenting content in a web browser. It is what defines the way and the
appearance content will be displayed in our browser.
How to make your CSS properties valid in an Html webpage?
There
many different ways we can use to give content style to a webpage, from an html
text editor to connecting both html and CSS editors, today we will learn some
basics on how to give some content style.
Example: Create a code similar to one bellow and give as
many style content as you want.
Hands on the new Platform
Let me start this chapter of our course guys by
introducing you to a great resource we will be using from now on, Little web
hut, this guys is a website that contains strong and useful information about
creating, editing and designing webpages online, and the good thing about it,
the advantage we will take from it is that it is based on real time practice,
it has a practice platform that allows its users to type in the code and
display it’s resultsonline, with no need of any kind of text editor so, go to
your web browser and access the link www.littlewebhut.com and you will
be able to practice everything we have seen by now and obviously our future
lessons. Let’s get it started.
Introduction to CSS
Like we have seen guys, HTML is a “mark-up language” used
for structuring and presenting content in a web browser, whereas CSS “Cascading Style Sheets”, is what
defines the appearance of that content, the way it will be displayed in our
browsers, (colours, animations and many other details we will be looking at
during the following lessons).
How to make your CSS properties valid in an Html webpage?
There
are many different ways we can work with CSS in order to provide content style
to a webpage and in this lesson we will see some of them. For instance, we can
type in the CSS code directly in the same text editor as the content, as well
as we can create a separated CSS file and connect it to the html file we intend
to provide style, see bellow how both procedures work.
Working with both CSS and html codes in the same text
editor’s file
This
method of applying styles is very specific, in a sense, the styles added this
way are applied to specific sections or tags of an html code, the CSS styles
are considered attributes of specific tags, and the right way to add them is by
typing the style attribute (style=”…”) after the opening tag of
any element in a html code and the style we want to apply on that specific tag
within the quotation marks of the style attribute, try adding the example
bellow.
Example: Create a code you want and set the style of the
background and content colours.
Code
|
Appearance
|
<!DOCTYPE html>
<html>
<head>
<title>2016</title>
</head>
<body style="background-color:
blue">
<p
style="color: white"> I have successfully created my first
webpage</p>
</body>
</html>
|
|
Note that: you can add multiple styles to the same tag as soon as you type in a
semi-colon after each style attribute and more important is that those styles
are only going to be available for that specific tag you are working on right?!
Overview: “<p
style=”color: red; text-align: right”
Creating a separated CSS and HTML files
Another method you can use to provide style to a webpage
is by creating a separated CSS file and connecting it to the html you intend to
provide style, check the procedure bellow.
This method guys uses a style tag located in the head of
the html file, it’s like it tells the html code in that html file where to find
style to apply in that exact webpage. In order to use this method, you need to
type the style tags (<link rel="stylesheet" type="text/css"
href="Code2.css"/>) in between the (head) tags, placing it after the (tittle) tags is more coherent, however you can place them anywhere
you whish as soon as it is in between the (head)
tags.
Example: Create two separated files (CSS and HTML) then
connect each one using the style tag we have just seen.
html
|
CSS
|
Result
|
<Doctype html!>
<html
lange="en">
<head>
<title>A special gift for you
</title>
<link rel="stylesheet"
type="text/css" href="Lesson12 EX2.css"/>
</head>
<body><h1>Mery
Christmas and Happy new year</h1> </div>
</body>
|
h1{
font-family:
Giddyup Std;
}
body{
background-color:
red;
font-family:
Arial;
}
|
 |
Important: you can now see that this method differs from the first we saw for
the fact that it is simply created separately, however it applies style the
same way the first one does, kindly see that we first have to type in the
direction or the place where we intend to add style (it can be a heading,
paragraph, body or…) then within brackets we type in the property ( it can be a
colour, a typing font, background or any other we wish) then finally the value,
or the style we intend to apply.
Find bellow some tags
you can use to apply styles to a webpage.
Background
|
Borders & text Align
|
aqua - aqua =
#00ffff = rgb(0,255,255)
black - black =
#000000 = rgb(0,0,0)
blue - blue =
#0000ff = rgb(0,0,255)
fuchsia - fuchsia =
#ff00ff = rgb(255,0,255)
gray - gray =
#808080 = rgb(128,128,128)
green - green =
#008000 = rgb(0,128,0)
lime - lime =
#00ff00 = rgb(0,255,0)
maroon - maroon =
#800000 = rgb(128,0,0)
navy - navy =
#000080 = rgb(0,0,128)
olive - olive =
#808000 = rgb(128,128,0)
orange - orange =
#ffa500 = rgb(255,165,0)
purple - purple =
#800080 = rgb(128,0,128)
red - red = #ff0000
= rgb(255,0,0)
silver - silver =
#c0c0c0 = rgb(192,192,192)
teal - teal =
#008080 = rgb(0,128,128)
white - white =
#ffffff = rgb(255,255,255)
yellow - yellow =
#ffff00 = rgb(255,255,0)
transparent - The background color under the element is visible.
image keyword:
none - Do not display a background image.
repeat keywords:
repeat (Repeat the background image horizontally and
vertically.)
repeat-x (Repeat the background image horizontally.)
repeat-y (Repeat the background image vertically.)
no-repeat (Do not repeat the background image.)
attachment keywords:
scroll - Background image will scroll along with the web page.
fixed - Background image is fixed and will not scroll.
inherit - A single inherit keyword is used to
specify that the values for this property should be taken from the parent
element. If inherit is used with the root element, then the
initial values for this property will be used. When the inherit keyword
is used, no other property values are allowed.
|
width keywords:
thin
medium
thick
style keywords:none - No border.
hidden -
The same as the keyword none. It is however different for table
elements in terms of border conflict resolution.
dotted - This is a sample
dashed - This is a sample
solid - This is a sample
double - This is a sample
groove - This is a sample
ridge - This is a sample
inset - This is a sample
outset - This is a sampleleft -
Aligns the content to the left side.
right -
Aligns the content to the right side.
center -
Centers the content.
justify -
If possible, both the left and right sides are aligned by adjusting the width
of the content. For example, the width of a line of text can be adjusted by
varying the word spacing.
inherit -
The inherit keyword is used to specify that the value for
this property should be taken from the parent element. If inherit is
used with the root element, then the initial value for this property will be
used
|
Overview on Selectors
By now guys we have seen two
different ways we can use to provide style to a webpage as well as some methods
we can use to apply styles in specific sections of a webpage. But, what if you
would like to add multiple styles to the same section of a webpage, or the same
styles to different sections of it? Furthermore, what if you would like to
apply the same style to the all webpage? What would you do?? In this lesson we
will learn the different methods we can use to apply styles in specific areas
of a webpage as well as on it as a all, this lesson will be very exciting guys,
you will learn how to manipulate different styles in the same webpage.
Let’s start by introducing selectors, which are some kinds of tags
that are used to select the elements that will receive the style, in a sense,
we add them into our codes in order to specify the section where we intend to
apply the styles.
Of course there are so many types of styles and unfortunately, we can’t go
over them all in class, here we will learn how to use the common ones then you
can and I encourage you to go and look for more on the internet, do this and
enrich your mind.
Remember!
You can apply multiple styles to
the same elements or tags by separating the properties we want to apply to
those specific tags or elements with colons like this: {<p style="text-alingn: center; color: red; font-family: Times
New Roman;…"} remember?! We talked about this during our last lesson.
Then, today’s lesson guys, is to teach you how you can do the opposite and even
more. I mean, selecting multiple tags or elements for a single style and more.
Let’s start by selecting multiple tags for a single style.
Selecting multiple tags for a single style
This guys is a very exciting tool to use when applying styles to your
webpages, it eases your work and decreases the amount of code you may need to
type in your files and the only thing you need to do is to separate the
elements or tags with comers before the properties
you intend to apply, like this: p, p1, p2, p3, h1, h2, {text-alingh:
center} in a sense, the text-align style set to center will be applied to all
the tags (p, p1, p2, p3, h1, and h2) check how it looks in the browser.
Code
|
Result
|
<DOCTYPE
html!><html><head><title> Example One </title><style
type="text/css"> p, h1, p1, h2, p2, h3, p3 {color: green;
text-align: center;}</style></head><body><h>Understanding
selectors</h><p>In order to apply styles</p><h1>Here
is the heading one</h1><p>This is paragraph
one</p><h2>Here is heading two</h2><p>This paragraph
two</p><h3>Here is paragraph three</h3><p>this is
paragraph three</p></body></html>
|
|
NOTE: we once talked in class that numbering paragraphs
doesn’t change anything in text editors like the ones we have been using, (NOTEPAD
& ++ doesn’t consider the numbers you add in a paragraph tag), of
course you might keep on numbering the paragraphs if you want but just don’t
forget that it will only help you to understand and identify your code but
nothing related to the webpage.
Applying a single style to all elements of a page
This is another great tag you guys should take
advantage of when creating webpages, it is known as universal selector it
applies all the properties mentioned on it over the all html tags and content.
However, though this is a universal selector, it doesn’t affect tags that have
already been added styles precisely, I mean, to them specifically, in sense, it
selects and applies to all the tags within the text editor but it loses its
properties when styles are applied to the tags themselves. Check the example
bellow:
Code
|
Result
|
<DOCTYPE
html!><html><head><title> Example Two
</title><style type="text/css"> * {color:
purple;}</style></head><body><h>Understanding
selectors</h><p>In order to apply styles</p><h1>Here
is the heading one</h1><p>This is paragraph
one</p><h2>Here is heading two</h2><p>This paragraph
two</p><h3>Here is paragraph three</h3><p>this is
paragraph three</p></body></html>
|
|
Class Selector
Guys this type of selector adds styles to tags or elements according to a
matched class name, in a sense, you state a specific class name and the styles
you intend to apply in the first place, then you go into your elements or your
code and add the same class name you have previously added in your class selector,
to every place you want to apply that style, for example (.tst1) starting with
a period is a must, And all the attributes or styles you intended to add or
described in the class selector will be applied to the elements. Check the
example bellow
Code
|
Results
|
<html><head><title>Example
three Class Slector</title><style type="text/css">.tst1
{background-color: red; color: white; text-align: center;}.tst2
{background-color: black; color: blue; text-align:
center;}</style></head><body style="background-color:
green"><h1 class="tst1">I'm the heading
one</h1><p class="tst1"> I'm the paragraph for heading
one </p><h2 class="tst2"> I'm the heading
two<h2/><p class="tst2">I'm the paragraph for heading
two</p></body></html>
|
|
Combining Selectors
Notice guys that we can also combine all the above selectors to any logic
we want, for instance, we can combine a type selector with a class selector
like this : style declaration: h1.tst1 {text-align: center} the same way
we can do this adding more elements like
this: ( h2, h2, p, h, h3.tst2 {color: red} try
this now.
Code
|
Results
|
<html><head><title>Example three
Class Slector</title><style type="text/css">h1.tst1
{background-color: red; color: white; text-align: center;}h2, p, h.tst2 {background-color:
black; color: blue; text-align: center;}</style></head><body
style="background-color: green"><h> Just adding one more
heading</h><h1>I'm the heading one</h1><p> I'm the
paragraph for heading one </p><h2> I'm the heading two
<h2/><p>I'm the paragraph for heading
two</p></body></html>
|
|
CSS BOX MODEL
Many times what a company will give
you is just a layout or drawing with boxes in order for you to build their
webpage and the first thing you need to know before start working on their
request is that those boxes has a strong meaning and can be divided in four
main areas: The content, padding,
borders and margin areas.
In this lesson, we will learn the
CSS’s box model, and the tags that allow us to control the dimensions and
effects of those areas (padding, borders, and margin) in a webpage, Let me tell
you guys that here is where we will start to have some fun, here is where
things will look a lot more interesting J believe me.
CSS’s box model visual overview
Description
Padding Area: We can take this as the background of everything in the
page guys, it can be set to be a colour, a picture and sometimes a collection
of pictures. This area is located behind the content of the page, for instance,
if the content is a paragraph of text, then the background or the padding area
will be all you can see behind that text.
Practice: Create a
basic webpage without any content and set the body’s background color to any
color you wish then show me the padding
area.
Content
area: This guys is the
section that comes right after the padding area, here is where the content
comes in, our texts, (paragraphs, headings, links,…) and media, (photographs,
audios and videos) takes place in here.
Border and Margin areas: I don’t think it’s needed,
but whoever has a doubt on this, please raise your hand!
Practice: In the page you have just created, add at least
one heading and one paragraph,-“write anything you want”, then do your best to
show me both, the padding and content areas.
Important: You have
to know guys that both, the border, margin and padding areas will always be invisible until you specify them,
that’s the reason why I told you to set the background color for the body to
any color you wanted, whereas you wouldn’t be able to identify them in the page
got it?.
Last but not least, in order to specify these areas you will have to use a
measurement method called pixels, in a sense, to set the distance between your content and the border (the padding area)
you will have to set the amount of pixels you want it to be, and that goes the
same to the border (padding – margin)
and margin (border to the end of the
webpage).
Example: Create or copy a code similar to the one
mentioned bellow and set the padding, border and margin areas to any size you
want.
Code
|
Result
|
<DOCTYPE
html!><html><head><title> Manipulating Boxes
</title><style type="text/css"> * {color: black;
text-align: center;}</style></head><body"><h
style="background-color: yellow; padding: 10px; border: 5px;
border-style: inset; border-color: red;"> I'm the heading one and I'm
inside the padding area wich has it's distance set to 10 pixels </h><p
style="background-color: blue; padding: 20px; border: 10px;
border-style: solid; margin: 15px;">I'm the paragraph one, a part of
the content</p></body></html>
|
|
Important: there are so many other parameters we can set
between all these box models guys, have a look at the image bellow and inspire
your vision.
You can set any size you want for each section of each box (padding,
content,…), all you need to do is just separate the words mentioned there with
a hyphen sign, then set your desired amount of pixels.
Now that you know how to manipulate all those box measurements, it’s time
to professionally create a webpage.
Before anything guys you have to know that in html, all of these boxes, all
of these areas are called (div’s),
in a sense, the tag name for each of these boxes is known as (div) they are all (div) elements and bellow is table with the basic div names and
their description, and guys note that they
are all self closing based tags –we have talked about this remember?!
Tag
|
Description
|
<div
id="container"> your content comes here </div>
|
The most external box or your layout
|
<div
id="header"> your content comes here </div>
|
To add any header you intend
|
<div
id="content"> your content comes here </div>
|
To add any content you intend to display
|
<div
id="nav"> your links come here </div>
|
To state a collection of links for example
|
<div
id="main"> your content comes here </div>
|
To add any content you intend to display
|
<div id="footer"> Copyright © Edson2016</div>
|
Your exclusive and assignable legal right
|
Now you are good to go web designer, build the structure you have prepared
as homework, or try out the one bellow J
Activity Correction
Last week “Now you are good to go web designer, build the
structure you have prepared as homework, or try out the one bellow J”
Now: If you have tried to build your webpage’s structure or the
layout I provided you in class (the one above) you might have found out that
your layout was not displayed in your browser like you expected, instead, all
what your browser displayed was just a blank page J I imagine how confused you
felt, try out the code bellow for the layout above J!
|
Code
|
Result
|
|
<DOCTYPE
html!>
<html
lange="en"><html><head><tittle> Hey
webdesigners</tittle></head><body><div
id="container"><div
id="header"></div><div
id="content"><div id="nav"></div><div
id="main"></div></div><div
id="footer"></div></div></body></html>
|
|
I want to tell you
guys, that it was not your fault, sure, “at
least if you have typed your code correctly, it was not your mistake”, then
the question is Why couldn’t you see all
the boxes like you expected?! The
answer for this question is easy, very easy guys, last week’s lesson is all
about the reasons why you couldn’t display your expected results in the
browser,how can you draw a box withought measurements? And ho about all those
boxes above?? J J J
In this lesson you
will learn how to use CSS’s box model alongside structuring a webpage’s layout J, let’s get it started.
Important
Remember I told you guys last week that the padding, border and margin areas would
always be invisible until you specify them?! Yes, here is another reason why
they need to be specified. We have so many boxes in our layout guys, so this
means, each of them can have it’s own size for both, (padding, border and
margin areas) I assume you should have
the answer for the main question on the previous page J
The boxes where not displayed in the browser becauses
neither details of them where previously specified, J yes, neither padding, border,
nor margin area’s sizes where specified, NOW How do we do that?
Different ways to set the size for a webpage’s layout through the CSS
box model
There are so many
ways to set the size or structure details for a webpage’s layout and you have
already seen some of them. Today I’m going to show you one I consider more
efficient and easy to use, but before I have to tell you guys that setting the
size for these boxes is nothing more than giving styles to them, and you will
see why, now follow up the steps bellow.
Step 1
The first thing you have to do is
creating a separate CSS file and connect it to the main HTML one, (where your div tags are) –We have seen this in
class and I should assume you know how to do it, but as a matter of precaution
(new students may have just joined, you can remember,…) let’s do it together.
o
Go onto your main html file (where your div tags are) and in the head tags, before or after the tittle ones, add this tag: <link rel="stylesheet" type="text/css"
href="L15EX.css"/> don’t
forget to use your given CSS file name then save it and you will be good to
go.
Once ready, all you will need to do is just go onto your CSS
file or text editor and add the sizes you intend for each box mentioned in your
HTML file (container, content, navigation, header, footer,…) and the procedure
to successfully do that is:
o
In your CSS file, type the name of your div element after a hash sign (#) then open a pair of curly braces
and within them, type the sizes for any section of the div element you intend,
as well as any style you may want to apply for that specific element
(background-color, color, font-family, text-size, text-align,….) as many as you
intend, just don’t forgot to separate them with semi-colon signs.
Check what I did with
mine and try out yours.
|
HTML Code
|
CSS Code
|
Results
|
|
<DOCTYPE html!>
<html lange="en">
<html>
<head>
<tittle></tittle>
<link
rel="stylesheet" type="text/css"
href="L15EX2.css"/>
</head>
<body>
<div
id="container"> <div
id="header"> I'm the header </div>
<div
id="content">
<div id="nav">
<p> I'm the navigation area </p></div>
<div
id="main"> <h>I'm the Main</h>
</div></div><div id="footer"> Copyright
© I'm the footer </div></div>
</body>
</html>
|
#container{
backgroung-color: red;
padding: 100px;
}
body{
background-color: purple;
}
#content{
background-color:white;
padding: 100px;
height: 200px;
}
#nav{
background-color: green;
width: 400px;
height: 200px;
float: left;
}
#footer{
background-color: white;
padding: 50px;
}
#header {
background-color: black;
padding: 50px;
color: white;
}
|
|
Overview
Java is one of the most known programming languages all over
the world, it is used in several fields, mobile app development, software
development, web design and a lot more, from now on, we will use java to learn
how to make pages dynamic using it’s scripts and Jquery.
Background
Java script: java script is a scripting
language that can make pages more interactive when they are displayed in the
browser. For example, it has scripts that can allow you to hide and display
content during a specific time or through another event on the page. Surely
java scripts are very useful, they can make incredible things believe me.
However, there is the flip side of the coin, java has couple disadvantages.
For instance, JavaScript
is not supported by all the browsers, especially by older browsers, very often
they may not effectively respond to our codes, they may bring unexpected errors
and at the worst, not work at all.
Another point I would like to mention is that working on
java can sometimes (especially I the beginning seem boring) but you will
realize yourself that some of your efforts are worth the results J yes, java has really
great features but they may require complicated programing scripts.
Now the solution: JQuery, it is a library of code that has been
written to minimize this issues, it takes into account the differences between
many browsers so that you don’t have to care about the browser each user is
going to use to display your results, and it also allows you to simplify the
scripts when typing your code, guys believe me, the codes we will use for this
section are very simplified, “remember
the script we used the first time we added audios into a webpage” J
Then do you need to know that much about JQuery?
Well, I would say
not at all because I don’t know much of it either, but give yourself sometime
to find out what is it all about, that
will help you understand more what you are doing and from there to solve any
issue that may arise you in the future.
Resources
Like I always tell
you guys, “I want you to know the roots of the tree”, where things come from,
reason why I’m not going to provide you any advanced software, we will keep
using notepad until the end of this section (soon with php) so forget my
software and put your hands on notepad J
J J.
Now let’s start working
In order to start
writing your scripts in notepad you will have to follow the steps bellow:
o
Open your text editor (notepad/++);
o
Start by typing the template that will allow you
to write all your JavaScript programming in the top of the document:
$(document).ready(function() { here is
where we will write all of our code });
o
When you are done with your code save the file
as (name.js);
o
Finally, return to your HTML file and right at
the bottom, before the body’s closing tag, type in the link that will connect
it to the java file you have just created, have a look: (<script
type="text/javascript" src="L16EX1.js"></script>)
o
Important
because we are taking advantage of the Jquery library, we need to have it
in our computers and we also need to mention it in our codes so they can work,
and for that to happen, you only need to download the Jquery file then mention
it above the link you have just used to connect the HTML & Java files and
here is the link: (<script type="text/javascript" src="jquery-1.11.3.min.js"></script>)
notice that 1.11.3.min.js is the name I have given to my
jquery library, so you need to mention yours
specific if you have a diferent one right?!
Important
It is crucial that
you know couple important things about java before you start working on it and
the first is that the case of the letters are very important in java, yes,
misunderstanding a capital letter in java can make your code invalid.
Good to go
As you have learned
some of the important things about java, it’s time to learn how to make some
useful effects with java and we will start by adding a (click & show and click & hide event).
Practice: Go into
your text editor and type in a code similar to the one bellow
|
HTML
|
Java
|
Result
|
|
<DOCTYPE
html!>
<html
lange="en"><html><head><title>Introduction to
java</title></head>
<body>
<h1>I'm the heading one</h1> <p>Im the paragraph for
heading one</p> <h1>I'm the heading two</h1>
<p>Im
the paragraph for heading two</p><h1>I'm the heading three</h1><p>Im
the paragraph for heading three</p><h1>I'm the heading
four</h1><p>Im the paragraph for heading four</p><script
type="text/javascript"
src="jquery-1.11.3.min.js"></script><script
type="text/javascript" src="L16EX1.js"></script></body></html>
|
$(document).ready(function() {
$("p").hide();
$("h1").click(function()
{ $(this).next().slideToggle(600);
});
});
|
|
Glossary
Java script function that comes from the Jquery library $(document).ready(function() { “this basically
tells our page when to run” all
of the code we will use will come inside this curly braces- just click the
enter button to give yourself some room t work})
Note that if we had
not used that function our code would haje just started running once we open
browser
;>>”end of a statement”
$(“p”)>> basically tells our page to hide all the
paragraphs as soon as our page has finished loading
$(“h1”) it tells the browser to
execute the following code as soon as the user clicks on the h1 tag then the following line of code
is load.
It’s like a sequence of codes load
according to the user events.
Overview
If you have never,
there will be a day in your life when you will need to email someone, perhaps
because it might be a lot more cheaper, or even that it’s the unique way you
have to reach that person, it can be personal, for a company, a University or
any other institution around the world and the reasons will depend on your
needs, perhaps to ask for help, tutoring, information, support, guidance and
many others, the truth is, weather personal, professionally or for business,
the ability to efficiently and effectively compose an email is hyper useful, while
living in this world the chances for you to send and receiving emails increase
every second and should better if you know how to address this situation before
it arises you.
How can one compose
an email effectively?
How can we write an
email effectively enough to be responded by a person who receives a lot of
emails?
Along my experience in applying for scholarships, attending
online fairs, discussions, presentations, tech forums contacting universities
abroad and many others, I have sent so many rambling and verbose emails believe
me. Writing emails especially for foreigners is not that easy, you need to hang
on a bit and think of couple details. In this lesson I will share with you
couple useful tips you guys may consider when writing emails for foreigners,
how to effectively and successfully approach people via email.
What, and not to do
when emailing a stranger?
How to write an email
people will actually want to read or feel excited about it?
Considerations
Give yourself
sometime to think of the following before writing your e-mails
o
At first, consider that your destination or
audience is a foreigner, (his or her habits differ a lot from yours, they might
be a lot more used to it than you are, their beliefs-do they have?!,…);
o
You need something from them and don’t want to
make them read your all email to be able to understand that;
o
They are more likely to not know you when you attend
all their presentations;
o
You intend to have your email read, Understood,
responded, not annoying and shorter;
o
Their position in society counts ”the amount of
emails they might receive a day, the context of those emails, possible standard
set of questions and favors, their free time, how long would you need their
attention and what would make them deposit it on you”;
Assume your feelings
o
You will always intend to write the “perfect”
e-mail (length);
o
You think your request is unique;
o
You are likely to not be thinking there have
been people asking the same thing you are asking for;
o
You are not aware how someone would have made
the same request shorter and consise.
Be aware of this:
An educational
advisor for example, or a famous writer, singer, TV or Radio presenter may tend
to have some natural habits people generally have when they go through an inbox
full of new emails, for instance:
o
They might tend to answer the ones that require
very little work;
o
They might tend to return to a long email when
they have more time;
o
They instantly tend to react in a defensive way
when a stranger asks for a meeting and automatically say no;
o
The “Whatsapp or what is the point background
questions”
How to address
1. CC: and Bcc: (‘Carbon Copy’ and ‘blind
carbon copy’)
This are very great
resources provided by email servers you guys should take advantage of, many
people don’t use this resources because they don’t know their purpose, but I’m
sure that from now on you guys will take serious advantage of it, pay attention
to the following:
CC: Carbon Copy: this feature allows
users to send messages to the main recipient while also sending to someone else
a copy at the same time, in a sense, you first select the main recipient of
your email, (the person to whom you created and intend to send the email) then
you select another you would like to get to know you sent that email. Important: be aware that if you send a
message to more than one person using the carbon copy feature, both the
original recipient and all the other recipients of the carbon copies can see
the e-mail addresses in the to and CC: fields. They will all be able to
see the addresses of everyone else who received it.
BCC: Blind Carbon Copy: this option
differs from the previous for the fact that it keeps recipients from knowing
who else was copied, blind copying e-mails can be useful when you want to send
the same e-mail to different people and in the same way you don’t want each one
to see each other e-mail addresses, the only recipient address that will be
visible is the one that will be in the To:
Field . important: it is good
that you that someone who is blind copied can actually see who else was copied
by hitting the “reply to all” button and send a reply to everyone.
In professional
settings copying someone on an email may sometimes be a must, others a strategy
to get things done on time, or even a matter of safety and trust. For example,
you can copy your boss on an email with the idea to let him aware of how the
process is going on, perhaps to your supervisor as well, and many others.
2. Start with a strong Subject
E-mail subject guys
are like newspaper headlines, they are what calls the reader’s attention, and
summarizes the article they should contain the main idea you want your reader
to take away from your email therefore, be as much specific as possible. Eg:
(“Asking for a meeting”, “Question” ”Important! Read immediately” “Quick
question” “Black” “”,) these subject lines are not stronger, they don’t give
the reader an idea of how important is your message when compared to this: (“Meeting on Tues, 10a.m May 1st2016”
“10am. Confirmed for Saturday…we will need a larger room” “Question regarding the topic of a book”) (“That file you
requested”)
3. In the body
Have a formal Intro
or Greeting
Don’t just go
directly to your text simply to be specific like I said earlier no, you can
start with a short polite intro not more
than 2 lines such as:
Dear professor Smith,
Hello Ms. McMahon,
Hi Jane,
Hi Ms. Ofobike,
Or if your audience is a group of people or if you don’t know
the name or surname of the person you are addressing you can go for something
more generic, yet formal such as:
To whom it may
concern,
Dear members of the
Selection Committee,
Hello everyone,
-------hope this finds
you well, hope all is well with you, hope you are doing well/good,----
------This is Tomas,
we met yesterday at the American Cultural Center on your presentation about
scholarships-----
------I’m writing to
inquiry about….-----I’m writing to ask for your support on….------I’m writing
in reference to……------
Useful hints
o
Separate paragraphs, in the form of block of
texts;
o
Bullet important details so that they are easy
to pick out;
o
Use bold face type or capital letters to
highlight important information (dates, places,…) but make sure you are not
writing your entire message in those formats;
o
Proofread your email when you are done, re-read
it and use your server’s proof-read feature before you send it, use the
appropriate grammar, spelling, capitalization and ponctuaction.
Finally make some kind
of sign-off
Though it is important that you pay
attention to the kind of sign-off’s you will use it’s not bad to have a generic
and polite one, your closing is meant to let the reader aware of who is
contacting them, so it’s not bad to have your name at the end of your email
have a look at the following options:
Alexandre Pale;
Manuel & Hardware
computers;
ACC-IT-Class of 2016;
Tomas
Or you can go for
something more friendly such as:
Thank you;
My best regards;
Best wishes;
Regards;
Yours Seeren;
You can also go for
something a lot more formal such as:
Sincerely;
Thank you for your
patience and cooperation;
hope to read from you soon;
Thanks for your
consideration;
Thanks for considering
myself for this position;
If you have questions
or concerns don’t hexitate to contact me
Let me know if you
need…
Looking forward to
hearing from you soon
REspectifully yours;
Homework
Overview
Like you already know, Gmail is the e-mail
service from Google that let’s you send and receive e-mails to and from people
all over the world,. Yeah, you would be just fine to tell me such definition if
you where not attending the IT classes here at the center. However, knowing
that you’re, and even if this is your first lesson, just assume the previous definition
as something generic, so generic enough that it can’t even get to the
definition you will have built in your mind by the end of this class today,
yes. In this lesson you will learn all about the amazing features and automatic
services Google offers through Gmail.
Has technology develops Google has been
upgrading it’s services more and more enough that each of their services has
become now a slot of thousand other services, for instance, Google drive was
firstly just a Google’s i-cloud version and it’s now their MS Office package
version, Google Maps was just their location services in the beginning and it’s
now the world’s Google Hearth, Google calendar, was just their calendar version
built online and it’s now an amazing resource to schedule meetings and thousand
other appointments with thousand other people around the world, and so Gmail
was not left aside from this all improvements, more than just a platform to
send and receive e-mails, Gmail has now thousand new strong and powerful
features that amazingly improve our experience when working on it, you can
create filters for specific emails and contents, you can apply rules to
specific e-mail subjects and addresses and a lot more, you can make your email
account a small independent actioner. So today we will learn how to
successfully use some of this features, I hope this becomes exciting like it
is.
Overview on filters
Before we get started, I need you guys to
understand the meaning of a filter in this matters. Generally speaking, a
filter would be any kind of device or tool that helps people separating two
different kinds of substances and they might be differences in terms of sizes,
properties and many others however, in the context of email filters we mean a situation
on which the user decides to separate, move, or delete specific kinds of
emails, and they might be in terms the topic, content, words, length to
specific email addresses got it? If not, don’t worry, log into your email
account from Google and let’s get it started.
Creating a filter to
block e-mail addresses
Gmail lets you create filters to block future
emails from sending you new emails, in a sense, you can choose specific email
addresses that you no longer want to receive emails from and block them got it?
Let’s try this! in your email’s
inbox, open the message or email you intend not to receive more emails in the
future and within the top bars click on
the more button and select the option filter
messages like these and a new window(the
filter window) will show up with the sender’s address in the (from field) and in there, you may type
more details concerning that email address or any other you might not bear on
mind (it’s subject, words used in the
body, and many others) and when you are done simply click on the option (create filter). You can also select your intended email from your
inbox then click on the more button and
select filter messages like these and
I will drive you in class and of course show you even more ways you can use to
do this.
Creating filters to
prioritize the people around you
Guys, you might
not use Google+ for your social networking needs or you might think it is a bad
thing but know that it can help you sort the wheat or the emails from the most
important people in your life, from the chaff or unnecessary or unimportant
ones inside your inbox and all you need to do is:
Enter
is:circle or circle:"name
of circle" in the Gmail search box
to identify messages from people you've specifically added to your Google+
circles (or one circle in particular). Use the drop-down dialog to create a
filter from the search and prioritize these messages by marking them as
important. Alternatively, you could set up a particular circle in Google+ for
the sole purpose of filtering messages and then apply a particular action to
any emails coming from those contacts, let’s try this out not.
Creating filters from
other accounts
Guys, if you're
using Gmail to store messages from other email accounts then you can easily
direct these emails or messages away from your main inbox, in a sense, you can
put this messages in a specific inbox to avoid unnecessary alerts, let’s see
how this works:
In the Gmail search box,
enter
to:myotheremail@domain.com to pick up messages sent
to your secondary address. Open up the drop-down dialog and create a filter
from the search, then choose to mark these messages as read when they come in,
or you can also opt to shift the emails to Gmail's Updates tab and mark them as
unimportant as well, reallyh?! This depends on the type of emails the account
gets or you intend to filter. The messages will sit under the Updates tab ready
to be reviewed at your leisure.
Short summary on last
week’s doubt (step-by-step sending an email from any computer)
First: turn on the computer >>see if
there is internet connection (Wi-Fi/modem) >>look for the search box
(bottom-left corner in W7 & top-right window/right click on the windows
logo on the bottom-left-corner in W8/above)>>search for a browser
(Internet explorer/Google Chrome/Firefox/Torch)>> run it,>>enter
the domain server for your email account( www.gmail.com / www.hotmail.com or any other)>>login to your
account through username & password.
Sem comentários:
Enviar um comentário