Categories
Apps iOS

iOS Programming with Swift

Want to develop an iPhone app? How do I start?

First, If you want to develop anything about Apple, you need a Mac. The only IDE(Integrated Development Environment) for developing apps on Apple platform is Xcode. Xcode is compatible with OS X and doesn’t support Windows. If you want to be a good programmer, starting with swift programming is a pretty good idea. Swift is a powerful and intuitive programming language for macOS, iOS, watchOS and tvOS. Writing Swift code is interactive and fun, the syntax is concise yet expressive, and Swift includes modern features developers love. Swift code is really easy to understand and produces software that runs lighting-fast. You even can learn Swift on iPad. Swift Playgrounds is a revolutionary new iPad app that helps you learn and explore coding in Swift. Built-in lessons and challenges teach fundamental coding concepts as you write real Swift code in an interactive environment designed for touch.

Screen Shot 2016-08-15 at 3.27.16 PM

Screen Shot 2016-08-15 at 3.21.12 PM

 

Basic syntax of Swift 

Constant and Variables

Constants and variables associate a name (such as maximumNumberOfLoginAttempts or welcomeMessage) with a value of a particular type (such as the number 10 or the string “Hello”). The value of a constant cannot be changed once it is set, whereas a variable can be set to a different value in the future.

letmaximumNumberOfLoginAttempts = 10

varcurrentLoginAttempt = 0

This code can be read as:

“Declare a new constant called maximumNumberOfLoginAttempts, and give it a value of 10. Then, declare a new variable called currentLoginAttempt, and give it an initial value of 0.”

In this example, the maximum number of allowed login attempts is declared as a constant, because the maximum value never changes. The current login attempt counter is declared as a variable, because this value must be incremented after each failed login attempt.

Functions

When you define a function, you can optionally define one or more named, typed values that the function takes as input, known as parameters. You can also optionally define a type of value that the function will pass back as output when it is done, known as its return type.

Every function has a function name, which describes the task that the function performs. To use a function, you “call” that function with its name and pass it input values (known as arguments) that match the types of the function’s parameters. A function’s arguments must always be provided in the same order as the function’s parameter list.

The function in the example below is called sayHello(_:), because that’s what it does—it takes a person’s name as input and returns a greeting for that person. To accomplish this, you define one input parameter—a String value called personName—and a return type of String, which will contain a greeting for that person:

funcsayHello(personName:  a href=”” String /a ) ->  a href=”” String /a  {

letgreeting = “Hello, ” + personName + “!”

returngreeting

}

 

Create a simple iOS app

1. Open Xcode and go to New -> Project

Screen Shot 2016-08-15 at 4.13.45 PM

2. Select Single View Application and click Next. Then you can set your project name, your team name and language etc. Click Next again, and you should be all set to start creating a iOS project.

Screen Shot 2016-08-15 at 4.00.50 PM

Screen Shot 2016-08-15 at 4.02.04 PM

 

3. There is a navigation file bar on the most left side, and you should be able to see “Main.Storyboard” (graph 1). Storyboard is the place where you can do designs as well as interactions. There should be a default rectangular like iPhone screen showing up if you are in Storyboard. That is the default ViewController which basically is interface user can see in the real iPhone. If the app you are creating needs three interfaces, you need to create three ViewControllers. On this simple example, I just want to create an App called switchColor. There are two ViewControllers corresponding to two interfaces on this app. And there is one button on each ViewController to be used for switching background color. Let’s start do it.

                                 Graph 1

Screen Shot 2016-08-15 at 4.02.32 PM

 

4. Click the default viewController. On the right most sidebar of Xcode, you should see View setting (Graph 2).  Then you can change the background color to Blue.  Let’s also add a text on the screen. Type Label on the right bottom corner (Graph 3),  then drag the label to your blue background view controller. By double clicking that label, you can change text to whatever you want. Let’s change it to “ Hello World ! ” .

                Graph 2                                                                             Screen Shot 2016-08-15 at 4.03.16 PM

Graph 3

Screen Shot 2016-08-15 at 4.03.36 PM

 

 

5. Let’s create another ViewController to represent another interface on the app. You can simply copy and paste old ViewController by pressing Command C + Command V or add a new viewController as the way we added Label. Then let’s change the background color of new viewController to Green.

6. You should see two different background color viewControllers in Storyboard now. Let’s add some interactions on it. Type button on the right bottom box and drag a Button to your Blue ViewController (Graph 4). Do the exactly same step again for the Green ViewController. Double click those two Buttons on the Storyboard, and you can change the texts on the buttons. Let’s change the text of Blue one to “Switch to Green”, and change the text of Green one to “Switch to Blue”.

Graph 4

Screen Shot 2016-08-15 at 4.05.33 PM

 

 

7. Final Step ! How do we add reactions for buttons ? Hold ‘control’ and click the Button you just created. If you try to drag the button to another ViewController, there will be an arrow showing up. You just need to point that arrow to the different ViewController (Graph 5). For example, you should click the “Switch to Green” button and drag the arrow from blue background ViewController to the green background ViewController as I show picture above. Then you need to do the same step for another ViewController such that your Storyboard should be like the picture I showed below.

IMG_1796

Graph 5

Screen Shot 2016-08-15 at 4.12.10 PM

The switching color App is done. You can run this app by clicking run button. If you click “Change to Green” button, the background will be changed to green. If you click “Change to Blue” button, the background will be changed to blue.

If you are interested doing Swift Programming and iOS app development,  you can check Apple Swift Guide on https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/index.html#//apple_ref/doc/uid/TP40014097-CH3-ID0 .

Categories
Security

Securing Your Online Services

Securing your online services

With more and more of our lives happening online, it’s super important to protect all of your personal information with secure passwords. Your personal information is probably stored across a wide variety of social media, Google, banks, and other sites that contain information you would not want to fall into the wrong hands.

There are several different aspects to making sure your passwords are protecting you as much as possible. This post will serve as an online security audit so that you can go through your online services and secure yourself as much as possible

Step 1: Securing your email

Your email account is the most important account to secure. If someone has access to your email, then they can view all of your personal personal information within those messages. Your main email account is also used for password recovery for every other account that you have, so if they get into your email, theres no stopping them from getting into your Facebook, Google, and banking information.

The first place to start is making sure your email has a very strong password. We will get into generating strong passwords later in the article, but your email account should definitely be one of the stronger ones. This is the first line of defense against people trying to enter into your email.

Step 2: Two-Factor Authentication

The basic premise behind two factor authentication
The basic premise behind two factor authentication

After you get setup with a strong alphanumeric password, the next step is to turn on Two-factor authentication (sometimes known as two-step authentication). This system adds an additional layer of security to your account by requiring you to have your phone or another device in order to get into your account. There are various implementations of this system, but it generally works by receiving a text message with a code that you enter after you enter your password. This code expires after 30 seconds, so even if someone was able to steal this code, it would be useless after 30 seconds.

The whole idea of multi-factor authentication is that you need both something you know (your password), as well as something you have (your phone) in order to access your account. Some security systems even add another factor such as a finger print or iris scan in order to access an account or area. You can find out which services you use have two factor authentication here.

Step 3: Using a password manager

1Password is one of the most popular password managers, especially for Mac and iOS devices
1Password is one of the most popular password managers, especially for Mac and iOS devices

Earlier I said that one of the best ways to secure your email was with a strong password. The best passwords are those that are long, random, and include a variety of letters, numbers, and symbols. Equally important is using a different password for each service. Many people use the same password across all of their logins. This means that once someone gets that password, they can basically access your entire life online. A password manager facilitates both of these goals by generating strong passwords, and then storing them securely so you never have to remember what they are.

Password managers are very good at generating random passwords for you to use. Most of them have build in generators that allow you to customize parameters such as length and what types of symbols you want to use. I would recommend creating the longest password possible for the most security.

Note that for some reason, certain services implement a maximum length for passwords. For these services, you will have to limit the length to what the service allows.

The second part, and perhaps the more useful part, of a password manager is that it stores all of them. As a user, all you have to do is remember one master password that allows you to access the password manager. The password manager stores all of your login information in an encrypted database that unlocks with your master password. Both 1Password and LastPass have browser extensions that will enter in your information when you come across a login page for a given service. Since you basically never have to type in your passwords manually, this means that you can make them longer and more secured. The only password you ever have to remember and type out is the one that unlocks your password manager vault. And even on devices such as your iPhone, you can set it to unlock with your fingerprint, so you never have to type in any passwords.

LastPass's Browser Extension
LastPass’s Browser Extension

Conclusion

So much of your data is stored online, that it’s dangerous not to protect it to the best of your ability. For most people, there is a tradeoff between security and convenience. Its so much more convenient to have the same password across multiple services. This is easy to remember, plus its easier to type in since these passwords are normally short and something relatable, such as a pet name or some combination of initials and a birthday. But these same elements that make it easy to log in yourself also make it easy for hackers gain access. If your password is something easy to guess, then they don’t even have to brute force their way in.

The steps outlined in this post will help you to maximize your online security, while still holding onto the convenience that we desire as end users. A strong email password is the root of your security strategy, as this helps to prevent hackers from gaining access to all your accounts when they compromise one. Two factor authentication means that even if someone gains your password, they still won’t be able to enter your account unless they get your phone. Finally, a password manager will allow you to have strong passwords while having the convenience of a single password.

Categories
Operating System Security Virus/Malware

Free is Never Free: Protect Yourself and Ensure You Never Pay

The Virtual market place is one unlike any other in the world. Never before has there been such vast and widespread access to the goods and services found online. Before, answering questions meant buying books. Listening to music meant purchasing albums.  Contacting friends and family meant paying for paper and postage, or putting coins in a payphone. You get the point. Limitless abilities and possibilities are immediately accessible by anyone with an internet connection, and most of the time, its free. Or is it?

Currency 2.0

This vast access to free services on the internet is one many our age take for granted. But what is not immediately obvious is that free is rarely free; Information is the new currency. Companies big and small, righteous or malicious, will pay big bucks for user data. Has a free game or app ever asked for you to sign in using your FaceBook Account? When you agree to this, you are providing the company with information about your age, likes, friends, etc, so that they can serve targeted ads and track usage and spending habits.  What’s nice is that large companies, will ask for permission to trade this information for your use of their service. But what about when they don’t?

Malware, Spyware, PUP, Oh My: How Your Own Computer Can Be Used Against You.

Lets conduct an experiment. We are the typical internet user, and we are interested in streaming tonight’s Hockey Game. So we google it: Free live Hockey Stream. We click the first link we find!
scrot2
scrot1
We can stream totally for free if we just install what the huge LIVE HD STREAM button takes us to! Or not. Lets read the permission we are about to give software we’ve never used before:

  • Read and change all your data on the websites you visit.
  • Change your search settings to sports.searchalgo.com
  • Change your privacy related settings.
  • Stream your favorite team’s game for free!

What will this extension do? Redirect your searches through their own advert riddled search engine, create their own advertisements on the sites you try to visit, and finally, collect and sell your usage data, and for free at that.

Using Protection and Getting Checked: Mom Would Be Proud

So free isn’t always free, and not every where on the internet is friendly. How do we navigate this treacherous virtual world safely? Common sense, Careful reading, and Curated content.

Common Sense:

  • Never install something if you did not set out to install it.  For example, while trying to install a free music player to replace iTunes, I found this:
    scrot3
    “Add and Start Download” could seem right, but that is not the installer for the Audio Player. That is the installer for another malicious Chrome Extension
  • Do not provide personal information to an unknown source. A company will not ever contact you first. Microsoft will never tell you they’ve detected a virus, but malicious scammers will tell you that they are Microsoft, and make away with credit card numbers, email addresses, and more. Can you believe people would just go on the internet and lie?!

Careful Reading:

  • Always read the permissions given when installing, and disable unwanted or unneeded ones. Installing an application on any platform, phone or desktop, will request your permission when making a change to your system, when downloading an unknown software, or when collecting information about your friends, your location, or your personal data.  Many times, these functions can be disabled or these permissions denied.
  • Always be sure the installer is installing what you expect. Many times, an installer for a free program can be packaged with unwanted or malicious software.  Always read what you are agreeing to before clicking “Agree” ,”Next”, or “Finish” when installing.
  • Check out reviews and guides. On the internet you are never alone, and as creepy as that may sound, there is safety in numbers. “Is MacKeeper a virus?” or “Is (new website) safe?” are great searches to see if people have been able to use services successfully

Curated Content

  • Find trusted routes to free services.  There are many non-malicious free services and programs out there, and there are many places where people have done the work to ensure that they are safe. http://www.umass.edu/it/software has a list of programs that can be obtained for free or at a discount. Another powerful tool is https://ninite.com/. An all in one free to use installer for a wide variety of programs. Pick and choose what you need.
  • Use a content blocker, check your security settings, and use an anti-virus software. Be sure pop-ups are disabled, get an ad-blocker (but whitelist the sites you want to help fund like your favorite Youtube channel), and get Malwarebytes, or McAfee from the UMass IT software page above.
Categories
Hardware

Should you get a Surface or a MacBook Air?

The Surface Book

The MacBook Air

When it comes to portable devices aimed at a college going audience, not many products can really compare to the sleek and powerful MacBook Air and Surface computers, each fulfilling a similar role as per the design of Apple and Microsoft respectively.

While both computers are excellent, they’re quite difficult to choose between. Both are offered at similar sub two-thousand-dollar price points, and both are designed with portability and aesthetics as the major goals of the devices. However, there are a number of key differences which can be highlighted that can help to make the decision when purchasing one of these machines.

Interface and Form Factor

The form factors of each device are strikingly different, with some variation depending on the specific model purchased. The MacBook Air comes in both 11 and 13-inch variants, with the 13 inch boasting some spec increases to boot. Surfaces, however, are a little more varied. If you’re looking for the newest devices on the market (which I would personally recommend), you’re essentially deciding between the Surface Pro 4 and the Surface Book.

Microsoft-Surface-Pro-4

While the Surface Pro 4 is essentially a tablet computer with an optional attachable keyboard, much like an iPad, the Surface Book is much more of a dedicated laptop-style device. Many people will prefer this style, as the more robust keyboard makes typing a much more pleasurable experience, yet the simplicity of the tablet experience might draw some to choose the Surface Pro 4 instead. Each device rings in at a similar size, the Surface Pro 4 having a slightly smaller 12.3-inch screen when compared to the Surface Books 13.5 inch.

Either way, both Surface devices present one striking difference in terms of the interface; touch screen. Touch screen is a valuable tool to many that increases ease of use and productivity, especially when in an environment where a stable desk is unavailable. Furthermore, each device comes with a touch screen sensitive stylus, useful for things such as drawing diagrams and signing documents in a convenient fashion.

The difference between the Surface and the MacBook Air essentially boils down to what it is you’re looking for. If you want the more traditional laptop experience, while sacrificing the utility of a touch screen in exchange for a slightly more portable device, the MacBook Air may be what you’re interested in. However, if a tablet-style hybrid device is more your style (with the Surface Pro 4 airing much more on the side of tablet than the Surface Book), surface devices may be worth looking into. Either way, you’re getting an excellent portable workstation to fit whatever needs you may have.

Specs

i3-logo-2016getimageIntel-Core-i7-6500U-6th-Generation

When it comes to internal hardware, both the Apple and Microsoft options are surprisingly similar. Both the MacBook Air and the Surface can be configured with a variety of processors, the MacBook allowing either an i5 or a much beefier i7, while the Surface Pro 4 also allows for less powerful core m3 and i3 processors, the Surface Book however being locked to the previously mentioned i5 and i7 just like the MacBook.

For general use, an i5 is really all that the average person needs. However, if you plan on doing any sort of gaming on these machines (which is not recommended, due to the lack of a non-integrated graphics card in any the machines, with the only exception being the much higher end Surface Books), an i7 could be worth the extra money.

Basically; the m3 and i3 are basic processors capable of doing most anything the average user would need, perhaps slugging behind a bit when it comes to multitasking. The i5 is a much more capable chip for this, and if you really need the extra juice, the i7 will certainly get the job done.

Memory and storage are another important aspect of these devices. The MacBook Air can be configured to have up to 512gb of extremely speedy flash-based storage, as well as up to 8gb of internal memory. Unless you’re someone who has literally thousands of photos on their computer, this should definitely be enough for the average user in terms of storage. Furthermore, 8gb of memory should definitely be enough, and will only ever begin to slow you down in the most demanding of multitasking scenarios, such as rendering video for an editing project.

Both surface devices have very similar configurations, with the Surface Pro 4 ranging from 4gb of memory to 16gb, while the Surface Book is locked at either 8gb or 16gb. Internal storage is pretty much the same story; the Surface Pro 4 can handle up to 256gb of storage (half that of the MacBook), while the Surface Book can take an impressive 1tb of the same flash based storage as the MacBook.

What this boils down to is that, depending on how much you need, the Surface Book could be your best option for mass storage. If 8gb of memory just isn’t enough for you, and you have over 500gb of files that you need stored, the high configurations of the Surface Book may just be your only option, as the MacBook Air only has a few options.

However, for most people, I would say that each device is about equivalent in terms of storage and memory. I wouldn’t let this bother you too much when picking your device, as external drives are always a way to expand storage, and more than 8gb of memory really isn’t necessary for most users.

Price

To conclude, there’s one more category of discussion that needs to be touched upon: price.

Money-PNG

Both the Surface and the MacBook Air are devices which you can get for under 2000 dollars, with the Surface Pro 4 and MacBook Air both being available (at minimum conditions) for just under 1000.

MacBook Airs range from about 900 dollars for a minimum configuration 11-inch model, all the way up to 1200 dollars for a 13-inch model armed with 8gb of memory, 512gb of storage and a powerful i7 processor.

Surfaces, however, range quite a bit. You can get yourself a minimum configuration Surface Pro 4 for about 900 dollars, just like the MacBook, with the only difference being that the Surface Pro 4 is configurable to up to an 1800-dollar machine.

If you’re interested in a Surface Book, expect to pay about 1200 dollars for the cheapest configuration, with its options ranging up to a shocking 3000 dollars for the model with a 1tb solid state drive built into the machine.

Whichever device you get, all of them fulfill the same basic role: a sleek, powerful, portable device with productivity in mind. If I were to buy these devices, I’d either go for the 1200 dollar MacBook Air configured with an i7 processor and 8gb of memory, or the 1200-dollar Surface Book. While this Surface Book configuration does require you to use an i5 instead of an i7, the addition of a touch screen and stylus definitely win back the lost value.

Categories
Hardware Security

Disproving Einstein: the Phenomenon of Quantum Entanglement and Implications of Quantum Computing

Quantum-Entanglement

Albert Einstein famously disparaged quantum entanglement as “spooky action at a distance,” because the idea that two particles separated by light-years could become “entangled” and instantaneously affect one another was counter to classical physics and intuitive reasoning. All fundamental particles have a property called spin, angular momentum and orientation in space. When measuring spin, either the measurement direction is aligned with the spin of a particle -classified as spin up- or the measurement is opposite the spin of the particle -classified as spin down. If the particle spin is vertical but we measure it horizontally the result is a 50/50 chance of being measured spin up or spin down. Likewise, different angles produce different probabilities of obtaining spin up or spin down particles. Total angular momentum of the universe must stay constant, and therefore in terms of entangled particles, they must have opposite spins when measured in the same direction. Einstein’s theory of relativity was centered around the idea that nothing can move faster than the speed of light, but somehow, these particles appeared to be communicating instantaneously to ensure opposite spin. He surmised that all particles were created with a definite spin regardless of the direction they were measured in, but this theory proved to be wrong. Quantum entanglement is not science fiction; it is a real phenomenon which will fundamentally shape the future of teleportation and computing.

Categories
Operating System

Technological Divergence

xkcd Phone 4 [Credit: xkcd.com]

In 2012, I was a believer in technological convergence. I believed that by the year 2020, we would be doing everything with our phones. After all, what was one to think as the smartphone swallowed the planner, the agenda, the calculator and the mp3 player? Who could deny the convenience of carrying around in your pocket the functionality of an office’s worth of word-processors, cabinets, spreadsheets and calculators; a library’s worth of books? This phenomenon is called technological convergence, and it’s been pointed to ever since cable companies started bundling television and phone services. Retroactively, though, it can be used to describe something as (relatively) simple as the Swiss-army knife. All it describes is when a single device provides two or more services/functions previously provided by different devices. Like when the spork deftly adapted the stabbing functionality of the fork with the shoveling functionality of the spoon.

Image result for sporkGenius.

In 2015, I received a gift that changed my mind.

The Kindle Paperwhite is a modest piece of technology. It’s a small, flattish rectangle with one button on the bottom, next to the charging port, and a small matte screen. It sports no headphone jack, no speakers, and its screen displays in basic black and white. It uses a capacitive touch screen that’s sometimes slow to respond, and it often has to flash the screen on and off between pages to clean its e-paper slate. It cannot play video, and it renders images poorly. That said, it does its job expertly.

The purpose of the Kindle Paperwhite is to store and read ebooks. It accomplishes that with more features than I even knew to ask for. It can hold thousands of books. Its non-irritating backlight can be fine-tuned perfectly to your reading environment. It comes pre-loaded with an Oxford English and Oxford American dictionary, and allows you to define words by pressing on them, then automatically saves those words to flashcard decks for study. Oh, and its battery life is measurable in weeks.

While I’m happy to expound the benefits of Amazon’s Kindle line, the point is that reading a book on a computer screen, or on a smartphone is tedious and irritating. My Kindle can’t do everything — far from it — but it can do what it does better than anything else.

This realization opened my eyes: the world is full of devices and softwares that do what they do best: Desktops for gaming, Laptops for portable work, tablets for natural note-taking… Maybe the way forward isn’t necessarily in packing the most features possible into a single product, but in perfecting those features where they work best in new, innovative ways. I’m not advocating we decouple the cell phone and the calculator anytime soon; I just suggest that next time you’re looking to buy a product, rather than considering the range of features, you take a moment to consider quality over quantity.

Categories
Operating System

Using Disk Utility for OS X

The disk utility for Mac OS X is very powerful. It allows for the control of storage drives attached to the computer. For example, the main internal hard drive can have permissions repaired, or the drive can be partitioned to allow for another operating system to be installed on the computer.

This is located in Applications > Utilities > Disk Utility.

Screen Shot 2016-10-08 at 1.37.29 PM

Disk Utility has some very useful features. On the left are drives are mountable images. The picture to the right has this computer’s hard drive, named “Macintosh HD”, and a bootable image named “Mac Installer.dmg”.

The most important section is the area with the hard drive. This area has a list of volumes currently connected to the computer, such as the internal hard drive or usb devices.

Screen Shot 2016-10-08 at 1.38.56 PM

Volumes can be unmounted from the computer (read: unusable to the user and not visible in Finder) to allow for First Aid on a drive and for partitioning the drive into parts. Note: These actions cannot be performed on Macintosh HD because I am not currently an administrator.

The volume can also be verified, the system can run a check to make sure that data is in its correct state. If at some point it is not in the correct state, Disk Utility will tell the user what to do, which usually involves running repair disk. This is a very powerful function as it allows the user to run checks and repair the computer without reinstalling the operating system.

Screen Shot 2016-10-08 at 1.37.58 PMUsually, nested inside of each volume is at least one partition. In the case of the image above, the volume “Macintosh HD” also has a partition with the same name. Partitions can also be verified, as well as have their disk permissions verified.

Disk permissions can change because of applications installing incorrectly or a failing drive. Checking if these have changed or the general state of these permissions is very important to IT professionals. Between the ability to check permissions and verifying the disk, it is possible to tell if a disk needs to be replaced, wiped and re-imaged, or is doing fine.Screen Shot 2016-10-08 at 1.39.55 PM

In the above menus, there are the options for encrypting drives, for journaling, and in other versions of Mac it can manage RAID. There is the option, for partitions, to open in Finder, if the partition is mounted.

 

Screen Shot 2016-10-08 at 1.41.30 PMLastly, there is a nice console that shows the history of what has happened to the drive. It also shows the result and the suggested further actions for the drive, like sometimes Mac will suggest to reboot into recovery to fix the drive.

Disk Utility differs from Windows computers, computers that often need to have the operating system at least partially reinstalled, rather than just repaired. Windows even goes so far as to make this easy for users to access.

In all, the Mac Disk Utility is a very useful application. The user can check the condition of their drive and potentially fix it, without needing a reinstall or a replacement.

 

Categories
Learning Management Systems Operating System Web

So You Want To Learn HTML? (Part 1: What IS HTML?)

Hi there! If you’ve clicked on this article, there is a non zero chance you want to learn HTML.

Today, I will be going over some of the basics of HTML. But first we must answer the question:

What IS HTML?

HTML Stands for HyperText Markup Language, and it provides the backbone for the code that makes up most web pages you visit on a daily basis. HTML code is usually written and modified using a variety of tags, styles and scripts.

  • Tags are the backbone of HTML, providing a basic structure for web pages.
  • Styles allow a web developer to modify the layout of a webpage but modifying attributes like the positioning, color, or size of elements on the webpage.
  • Scripts allow a web developer to create ways for users to interact with webpages in a variety of ways.

Today, we will be creating a basic HTML document. To begin, open up A simple text editor. The most common/easy to use for this exercise are Notepad (Windows) or TextEdit (Mac).

notepad-blank.bb647ae001a4fc7d168c240e01088787[1]

This is where we’ll begin. As previously stated, tags are the backbone of an HTML document, and are what we’ll be using to create a very basic text page. Every tag has an opening tag and closing tag. Text is then placed in between these tags.

Let’s run through a quick example: To create a full header tag, one would simply type the opening tag for a header: <h1>, followed by some text, and finally, the closing header tag: </h1>. Altogether, it would look something like this:

<h1> This is what a header looks like! </h1>?

Got that? To break it down one last time:

<h1> is our opening tag. It tells the document, “hey, I’m about to start a header tag. The stuff to follow is going to make a header for my page!”

</h1> tells the document, “I’m done writing the header now. Close it up!”

On a very basic level, this is all it takes to write a line of HTML code. Now, let’s dive into a few of the basic tag types.

Tag Types

Today we will be going over two very basic HTML tags to help give you a taste of writing HTML code.

Header

The header tag is a very important one, usually used to format the title of a webpage. We worked with it a bit up above, but there’s an extra part about headers that is important to know, for formatting purposes. The number that comes after the “h” in the header tag ranges from 1-6. These numbers rank the “importance” of each header in a given HTML document. Each rank, from <h1> all the way to <h6>, produce a progressively smaller header.

Consider the following block of code:

<h1> This is what an h1 header looks like! </h1>
<h2> This is what an h2 header looks like! </h2>
<h3> This is what an h3 header looks like! </h3>
<h4> This is what an h4 header looks like! </h4>
<h5> This is what an h5 header looks like! </h5>
<h6> This is what an h6 header looks like! </h6>

This code, when saved and viewed as an HTML document, looks like this:

headers

As we can see, each successive “rank” in our headers produces a smaller and smaller line, with the last couple of lines ending up quite small. This allows you to create “sub headers” to rank and organize items on your page by importance.

Paragraph

The paragraph tag is a simple and elegant way of “wrapping” text in your document, so that it doesn’t all stay together on one, long line. To represent a paragraph, use the following structure:

<p> This is my paragraph! By using this tag, it will wrap all of the text that I’m typing inside of it to make it much nicer to look at and read in my HTML document. Thanks <p> tag! </p>

Now that we’ve learned a couple of HTML tags, let’s use them to whip up your own HTML document!

  1. Open up Notepad, TextEdit, or similar text program.
  2. Type the following on the first line: <h1> This is my first HTML Document!</h1>
  3. On the next line, copy and paste the following: <p> The paragraph tag allows me to input text into my document, and format it to make it readable!</p>
  4. Finally type an <h2> header, with your name, and the date. Don’t forget to close the tag!
  5. Save the file as an HTML document. To do this, when naming the file, type ‘.html’ after the file name (for example: MyFirstHTML.html). Save it somewhere on your computer that is easily accessible.

Your final code should look something like this:

<h1> This is my first HTML Document!</h1>
<p> The paragraph tag allows me to input text into my document,  and format it to make it readable!</p>
<h2> First Name Last Name, October 4, 2016 </h2>

When you try to open up the HTML document, it should look like this:

headers

Congratulations! This article provides a very basic overview of HTML, and teaches you the basics of creating your first HTML document. Next time, we will discuss some more basic structural tags, as well as begin discussing styles, which will allow us to further modify the layout and color, as well as other features of our web page.