Learning Group For Web Technologies

reca · Oct 18, 2016

Hello Ladies,
Here is my day 8 update:
Day 8:
We saw the <h1></h1> heading tag in the previous update.
There are 5 more heading tags. <h2> to <h6> tags.
<h1> is the biggest size heading and <h6> is the smallest heading.

HTML links:
<a> tag is used to define links. This is a very important tag.
This is the tag used to link one document with other.
example: <a href="The latest fashion & beauty trends, opinion, celebrity news | Marie Claire">This is a link to MarieClaire Website</a>
We can have any number of <a> tags in a webpage. When we click on the link, the target webpage is displayed in the same window.
href in the<a> tag is called the attribute and it holds the link to where the navigation should happen.
There will be attribute-value pair inside the tags to enhance the features offered by the html tags.

Code:

<!Doctype HTML> <html> <head> <title>My web Page</title> </head> <body> <h1> This is Heading 1 </h1> <h2> This is Heading 2 </h2> <h3> This is Heading 3 </h3> <h4> This is Heading 4 </h4> <h5> This is Heading 5 </h5> <h6> This is Heading 6 </h6>  <a href = "http://www.marieclaire.co.uk/" target="_blank"> This is a link to MarieClaire Website </a> </body> </html>

If we want to open the linked documents in the new tab, then there is an attribute called target.
In the <a> tag notice the target attribute . It has the value "_blank". This means the link has to open in the new tab.
Please copy the code into your notepad and save it with .html file extension.
Open this file in the browser to watch the magic.
Please feel free to discuss any queries here.
Attachment of the executed code is made.
Tagging : @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu ,@curiousgals78 ,@EagerForInfo ,@kaniths
Good day to all

reca · Oct 20, 2016

Hello Ladies,
Here is my day 9 update:
Day 9:
Today I learnt something interesting and colorful. Using an Image in the webpage!
Code:
<!Doctype HTML>
  <html>
   <head>
      <title>Display a Picture</title>
   </head>
   <body>
      <a href="http://indusladies.com/community/">
          <img src="IL.jpg" alt="indusladies.com" width="1000" height="100">
      </a>

     </body>
  </html>
We use an <img> tag to insert the image.
it has an attribute called src which has the image file name.
This image tag is nested in the previously discussed link tag <a></a>.
When you execute the page, you see an image, when you click on the image, you will be navigated to the
link Indusladies. Its our fav web application
I am attaching the execution result.

This is very interesting please give a try!
Let us know if you need any help.
Tagging @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu ,@curiousgals78 ,@EagerForInfo ,@kaniths
Good day to all
Best Regards,
R

Arunaravi · Feb 7, 2018

reca said: ↑

Hello Ladies,
A Journey of Thousand miles begins with a Single step.
Today I have taken that first step towards my Web technologies Learning Journey.
This is what I learnt today.
Day 1
Short History:
Tim Berners Lee invented the World Wide Web.
The first trials of the World Wide Web were at the CERN laboratories (one of Europe's largest research laboratories)
in Switzerland in December 1990.

Basics of WWW:
Web or WWW ( World Wide Web) is a massive collection of
electronic documents ( e-documents also called web pages).These documents are formatted using
HTML markup language.The related documents are linked to each other using the Hyperlinks.
Hyperlink is the key feature of Web. Using hyperlinks we can navigate to different documents.
The documents are stored on special powerful computers.
On this computers there exists a special software program called Web Server.
Documents are accessed using the Web browser (installed on your machine) ( Chrome, Mozilla firefox, safari, Internet explorer,opera etc) by
typing the URL ( Uniform resource Locator) in the address bar of the Browser.
Your machine is connected to the Remote server through Internet.
Internet is the world wide network of interconnected Computers.It is a network infrastructure that uses TCP/IP protocol to connect computers.
It is just like our road/ railway network. It connects computers across the world.
Web follows Client-Server Achitecture. Your Web browser acting as client and Remote Web server acting as Server.
When URL (ex: www.facebook.com )is typed into the address bar and Enter Key is pressed, you can see the
login page of the facebook website. This is the Entry page of facebook application.
The Webpages are built using the HTML( Hypertext Markup Language).

We shall see what is HTML in next update
Good day to all
Tagging @Gauri03

Regards,
R
Click to expand...

Very interesting.i am blessed coz today i wish to learn web designing.but i know only banking operations.hence searching.this post is really really useful to me.Thank u.

Arunaravi · Feb 7, 2018

reca said: ↑
Hello Ladies,
Here is my day 8 update:
Day 8:
We saw the <h1></h1> heading tag in the previous update.
There are 5 more heading tags. <h2> to <h6> tags.
<h1> is the biggest size heading and <h6> is the smallest heading.

HTML links:
<a> tag is used to define links. This is a very important tag.
This is the tag used to link one document with other.
example: <a href="The latest fashion & beauty trends, opinion, celebrity news | Marie Claire">This is a link to MarieClaire Website</a>
We can have any number of <a> tags in a webpage. When we click on the link, the target webpage is displayed in the same window.
href in the<a> tag is called the attribute and it holds the link to where the navigation should happen.
There will be attribute-value pair inside the tags to enhance the features offered by the html tags.

Code:

<!Doctype HTML> <html> <head> <title>My web Page</title> </head> <body> <h1> This is Heading 1 </h1> <h2> This is Heading 2 </h2> <h3> This is Heading 3 </h3> <h4> This is Heading 4 </h4> <h5> This is Heading 5 </h5> <h6> This is Heading 6 </h6>  <a href = "http://www.marieclaire.co.uk/" target="_blank"> This is a link to MarieClaire Website </a> </body> </html>

If we want to open the linked documents in the new tab, then there is an attribute called target.
In the <a> tag notice the target attribute . It has the value "_blank". This means the link has to open in the new tab.
Please copy the code into your notepad and save it with .html file extension.
Open this file in the browser to watch the magic.
Please feel free to discuss any queries here.
Attachment of the executed code is made.
Tagging : @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu ,@curiousgals78 ,@EagerForInfo ,@kaniths
Good day to all
Click to expand...
where is day 2 to day 7 update? not seen.i cant understand the above.day 1 to straight day 8? in between?
Aruna

Arunaravi · Feb 7, 2018

reca said: ↑

Hello Ladies,
Here is my Day 2 Learning update.
Day 2
HTML- Stands for Hyper Text Markup Language.
It is not a programming language. But it is a markup language. Markup languages are used to define,
process and present the Text/content. The language specifies CODE for formatting, these CODES are called TAGS.
HTML is the most popular and widely used markup language.
Other includes XML and XHTML.
HTML is the standard markup language for creating web pages and web applications.
HTML 2.0 is the oldest version of HTML.
Several other older versions are HTML 3.2, HTML 4.0, HTML 4.01. HTML 4.01 ruled the Web world for almost 15 years.
On October 28,2014 HTML5 was published. It is the most recent version
of HTML. We are going to learn HTML5.

In the next update I will post about HTML5.
Tagging @Gauri03 .
Good day to all
Regards,
R
Click to expand...

sorry. now only it came in the next page.hence sorry.
Aruna

Arunaravi · Feb 7, 2018

reca said: ↑

Hello Ladies,
Here is my Day 2 Learning update.
Day 3:
HTML5 is the 'State of the Art', current version of HTML.
W3C ( World Wide Web Consortium) and the WHATWG( Web Hypertext Application Technology Working Group),
are responsible for developing and maintianing HTML5 standards.
HTML5 comes with additional tags like <header>,<nav>,<article> etc to improve the web pages formatting and
tags like <audio>, <video> to support rich multimedia. Earlier days if we had to play a video on the webpage,
our browsers need to have the proprietary Adobe Flash plugin installed. Now with HTML5 it is possible to
watch videos without any Plugins. HTML5 makes our web pages more dynamic.
When using the term HTML5 it is assumed that CSS3 ( Cascading Style Sheets Version 3) and Javascript is included in the definition.
CSS3 is the brand new version of CSS. CSS3 comes with new features like rounded corners, shadows or animations
that can be added using couple of lines of code. With Javascript pages becomes more dynamic and interactive. Javascript API ( Application program Interfaces) provides features like geolocation integration / access to native mobile features. One big plus that was expected from HTML5 for today's digital transformation was support to mobile devices.
Yes HTML5 is mobile friendly.
Web site or a Web application developed using HTML5 can be deployed on both desktop and mobile devices( smart phones,tablets, laptops) . Meaning HTML5 is responsive.

HTML- Provides Structure (formatting) to Content.
CSS - provides Style ( color, font, background etc ), makes pages presentable
Javascript - adds intelligence to page. It is the programming language thus it adds logic to web pages
making them intelligent and dynamic.

In the next update I will provide more details on HTML5.

Tagging @Gauri03 and @curiousgals78 ,

Good day to all
Regards,
R
Click to expand...

Thank u
Aruna

reca · Apr 27, 2018

Hello Ladies,
I am Sorry I was stuck with hectic work and life !
I would like to restart learning web development !
Is anyone interested in joining me for learning HTML5, CSS3, Javascript and Jquery ?

reca · Apr 27, 2018

Hello Ladies,
Here is my day 10 update !
Day 10
We have an html attribute called 'style'. We use this attribute to add color, background-color, font, font size etc to the page and content.
<tagname style="property:value;"> is the syntax . The property is the css(cascading style sheet)property, value is the css value.

This attribute is really exciting! it gives look and feel to the page . The colors you see on the web page is because of CSS. CSS is a seperate topic . but just to get taste of it, we first use it within the HTML element. This is called In-line CSS. Have a look at the below example .
style="background-color: pink"
here,
1.style is the attribute
2.backgound-color is the CSS property
3.pink is the CSS value

We can chain multiple css properties and values seperated by semi-colon like this :
"color:red; background-color: yellow ; font-size:30px "

Below is the example where the h1 tag and the p tags are styled.
Just copy and paste below code it in notepad ... save note pad with .html file extension , right click on the file and open with chrome browser. voila! its funn !

<!Doctype HTML>
<html>
<head>
<title>Display Colors</title>
</head>
<body>

<h1 style="background-color: pink;">Using 'STLYE' tag in HTML </h1>

<p style="color:red; background-color: yellow ; font-size:30px "> As of 2017, text messages are used
by youth and adults for personal, family and social purposes and in business.
Governmental and non-governmental organizations use text messaging for communication between colleagues.
As with emailing, in the 2010s, the sending of short informal messages has become an accepted part of many cultures.
This makes texting a quick and easy way to communicate with friends and colleagues, including in contexts where a call would be impolite or inappropriate
(e.g., calling very late at night or when one knows the other person is busy with family or work activities). Like e-mail and voice mail, and unlike calls
(in which the caller hopes to speak directly with the recipient), texting does not require the caller and recipient to both be free at the same moment;
this permits communication even between busy individuals. Text messages can also be used to interact with automated systems, for example, to order products
or services from e-commerce websites, or to participate in online contests. Advertisers and service providers use direct text marketing to send messages
to mobile users about promotions, payment due dates, and other notifications instead of using postal mail, email, or voicemail. </p>
</body>
</html>

Do try and let me know how it looks !
Thank you for going through the post
Tagging : @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu ,@curiousgals78 ,@EagerForInfo ,@kaniths
Best Regards,
R

shravs3 · Apr 27, 2018

reca said: ↑

Hello Ladies,
Here is my day 10 update !
Day 10
We have an html attribute called 'style'. We use this attribute to add color, background-color, font, font size etc to the page and content.
<tagname style="property:value;"> is the syntax . The property is the css(cascading style sheet)property, value is the css value.

This attribute is really exciting! it gives look and feel to the page . The colors you see on the web page is because of CSS. CSS is a seperate topic . but just to get taste of it, we first use it within the HTML element. This is called In-line CSS. Have a look at the below example .
style="background-color: pink"
here,
1.style is the attribute
2.backgound-color is the CSS property
3.pink is the CSS value

We can chain multiple css properties and values seperated by semi-colon like this :
"color:red; background-color: yellow ; font-size:30px "

Below is the example where the h1 tag and the p tags are styled.
Just copy and paste below code it in notepad ... save note pad with .html file extension , right click on the file and open with chrome browser. voila! its funn !

View attachment 252457
<!Doctype HTML>
<html>
<head>
<title>Display Colors</title>
</head>
<body>

<h1 style="background-color: pink;">Using 'STLYE' tag in HTML </h1>

<p style="color:red; background-color: yellow ; font-size:30px "> As of 2017, text messages are used
by youth and adults for personal, family and social purposes and in business.
Governmental and non-governmental organizations use text messaging for communication between colleagues.
As with emailing, in the 2010s, the sending of short informal messages has become an accepted part of many cultures.
This makes texting a quick and easy way to communicate with friends and colleagues, including in contexts where a call would be impolite or inappropriate
(e.g., calling very late at night or when one knows the other person is busy with family or work activities). Like e-mail and voice mail, and unlike calls
(in which the caller hopes to speak directly with the recipient), texting does not require the caller and recipient to both be free at the same moment;
this permits communication even between busy individuals. Text messages can also be used to interact with automated systems, for example, to order products
or services from e-commerce websites, or to participate in online contests. Advertisers and service providers use direct text marketing to send messages
to mobile users about promotions, payment due dates, and other notifications instead of using postal mail, email, or voicemail. </p>
</body>
</html>

Do try and let me know how it looks !
Thank you for going through the post
Tagging : @Gauri03 , @Sunshine2020 , @Sparkle , @Pushhu ,@curiousgals78 ,@EagerForInfo ,@kaniths
Best Regards,
R
Click to expand...

Hi I’m also interested to learn UI stuff as it’s the most desired skill currently. Recently I saw some Nanodegree program in Udacity and it’s full stack web developer. Anyone has idea about it ?